:root {
    --rh-red: #db3c19;
    --rh-red-bright: #f04a24;
    --rh-green: #35d28a;

    --rh-bg: #090c0e;
    --rh-panel: #101519;
    --rh-panel-soft: #141a1e;
    --rh-panel-deep: #090d10;

    --rh-line: #303a41;
    --rh-line-soft: #242d33;

    --rh-text: #f4f7f8;
    --rh-muted: #94a0a8;
    --rh-dim: #68757d;
}


/* =========================================================
   PAGE
   ========================================================= */

.rh-flow-page {
    position: relative;

    min-height: calc(100vh - 180px);

    padding: 42px 28px 78px;

    box-sizing: border-box;

    background:
        radial-gradient(
            circle at 50% 0%,
            rgba(219, 60, 25, 0.08),
            transparent 30%
        ),
        linear-gradient(
            rgba(7, 10, 12, 0.91),
            rgba(7, 10, 12, 0.97)
        ),
        url('/assets/images/home/scene-forest.webp')
        center / cover fixed;

    color: var(--rh-text);
}

.rh-flow-page::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.50),
            transparent 18%,
            transparent 82%,
            rgba(0, 0, 0, 0.50)
        ),
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.010) 0 1px,
            transparent 1px 5px
        );
}

.rh-flow-shell {
    position: relative;
    z-index: 1;

    width: min(1180px, 100%);

    margin: 0 auto;
}


/* =========================================================
   PAGE HEADING
   ========================================================= */

.rh-flow-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;

    margin-bottom: 24px;
}

.rh-flow-page-heading > div:first-child {
    max-width: 760px;
}

.rh-flow-page-heading h1 {
    margin: 4px 0 8px;

    color: #ffffff;

    font-size: clamp(28px, 3.4vw, 44px);
    font-weight: 950;
    line-height: 1.05;

    text-transform: uppercase;
    letter-spacing: 0.015em;
}

.rh-flow-page-heading p {
    margin: 0;

    color: #9da8ae;

    font-size: 14px;
    line-height: 1.6;
}

.rh-flow-page-heading-compact {
    align-items: center;
}

.rh-flow-eyebrow {
    margin: 0;

    color: var(--rh-red-bright) !important;

    font-size: 10px !important;
    font-weight: 900;
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: 0.16em;
}

.rh-flow-heading-server {
    min-width: 230px;

    padding: 11px 14px;

    box-sizing: border-box;

    border: 1px solid #333e45;
    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            rgba(18, 24, 28, 0.94),
            rgba(9, 13, 15, 0.96)
        );

    text-align: right;
}

.rh-flow-heading-server small,
.rh-flow-heading-server span {
    display: block;

    color: #748089;

    font-size: 9px;
}

.rh-flow-heading-server strong {
    display: block;

    margin: 3px 0;

    color: #ffffff;

    font-size: 13px;
}


/* =========================================================
   MAIN 3-STEP PROGRESS
   Wide horizontal step cards, not tiny circles.
   ========================================================= */

.rh-flow-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin: 0 0 26px;
    padding: 0;

    list-style: none;
}

.rh-flow-progress > li {
    position: relative;

    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 12px;

    min-height: 92px;

    padding: 12px 14px;

    box-sizing: border-box;

    border: 1px solid #2d373e;
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            rgba(17, 23, 27, 0.96),
            rgba(9, 13, 15, 0.97)
        );

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.20),
        inset 0 1px rgba(255, 255, 255, 0.025);
}

.rh-flow-progress > li::before {
    content: "";

    position: absolute;

    left: -1px;
    top: -1px;
    bottom: -1px;

    width: 3px;

    border-radius: 4px 0 0 4px;

    background: #3a444b;
}

.rh-flow-progress > li.is-active {
    border-color: #5a382f;

    background:
        radial-gradient(
            circle at 22% 50%,
            rgba(219, 60, 25, 0.09),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            rgba(19, 25, 29, 0.98),
            rgba(10, 14, 17, 0.98)
        );
}

.rh-flow-progress > li.is-active::before {
    background: var(--rh-red-bright);

    box-shadow:
        0 0 14px rgba(240, 74, 36, 0.36);
}

.rh-flow-progress > li.is-done::before {
    background: var(--rh-green);
}

.rh-flow-progress > li.is-locked {
    opacity: 0.58;
}

.rh-flow-step-icon {
    position: relative;

    display: grid;
    place-items: center;

    width: 70px;
    height: 68px;
}

.rh-flow-step-icon > img:not(.rh-flow-step-lock) {
    width: 64px;
    height: 64px;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(0 8px 9px rgba(0, 0, 0, 0.50));
}

.rh-flow-progress > li.is-active
.rh-flow-step-icon > img:not(.rh-flow-step-lock) {
    filter:
        drop-shadow(0 8px 9px rgba(0, 0, 0, 0.52))
        drop-shadow(0 0 12px rgba(30, 154, 255, 0.20));
}

.rh-flow-step-number {
    position: absolute;
    z-index: 4;

    top: -2px;
    left: -2px;

    display: grid;
    place-items: center;

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

    padding: 0 5px;

    box-sizing: border-box;

    border: 1px solid #46525a;
    border-radius: 3px;

    background: #0b1013;

    color: #c0c8cd;

    font-size: 8px;
    font-weight: 950;

    letter-spacing: 0.06em;
}

.rh-flow-progress > li.is-active .rh-flow-step-number {
    border-color: var(--rh-red-bright);

    background:
        linear-gradient(
            180deg,
            #e44a25,
            #942513
        );

    color: #ffffff;
}

.rh-flow-progress > li.is-done .rh-flow-step-number {
    border-color: rgba(53, 210, 138, 0.62);

    color: #d7f7e8;
}

.rh-flow-step-lock {
    position: absolute;
    z-index: 5;

    right: -1px;
    bottom: -2px;

    width: 28px;
    height: 28px;

    object-fit: contain;

    filter:
        drop-shadow(0 4px 6px rgba(0, 0, 0, 0.60));
}

.rh-flow-step-copy {
    min-width: 0;
}

.rh-flow-step-copy small,
.rh-flow-step-copy strong,
.rh-flow-step-copy span {
    display: block;
}

.rh-flow-step-copy small {
    margin-bottom: 4px;

    color: #6f7b83;

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.rh-flow-progress > li.is-active .rh-flow-step-copy small {
    color: var(--rh-red-bright);
}

.rh-flow-progress > li.is-done .rh-flow-step-copy small {
    color: var(--rh-green);
}

.rh-flow-step-copy strong {
    color: #ffffff;

    font-size: 13px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.rh-flow-step-copy span {
    margin-top: 4px;

    color: #77848c;

    font-size: 10px;
}


/* =========================================================
   DESKTOP WORKSPACE
   ========================================================= */

.rh-flow-workspace {
    display: grid;
    grid-template-columns:
        minmax(0, 1.65fr)
        minmax(300px, 0.75fr);
    gap: 18px;

    align-items: start;
}

.rh-flow-workspace-single {
    grid-template-columns: minmax(0, 1fr);
}

.rh-flow-panel {
    border: 1px solid #303a41;
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            rgba(17, 23, 27, 0.985),
            rgba(9, 13, 15, 0.985)
        );

    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.30),
        inset 0 1px rgba(255, 255, 255, 0.025);
}

.rh-flow-panel-main {
    padding: 28px 30px 30px;
}

.rh-flow-panel-side {
    padding: 24px;

    position: sticky;
    top: 28px;
}

.rh-flow-panel-heading {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 18px;

    margin-bottom: 24px;
}

.rh-flow-heading-image {
    width: 88px;
    height: 88px;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(0 10px 12px rgba(0, 0, 0, 0.54));
}

.rh-flow-heading-image-steam {
    width: 82px;
    height: 82px;
}

.rh-flow-panel-heading h2 {
    margin: 5px 0 7px;

    color: #ffffff;

    font-size: clamp(25px, 3vw, 38px);
    font-weight: 950;
    line-height: 1.05;

    text-transform: uppercase;
    letter-spacing: 0.012em;
}

.rh-flow-panel-heading p:not(.rh-flow-eyebrow) {
    margin: 0;

    max-width: 720px;

    color: #9aa5ab;

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

.rh-flow-panel-side h3 {
    margin: 0 0 12px;

    color: #ffffff;

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

    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.rh-flow-panel-side p {
    margin: 0 0 16px;

    color: #909ba2;

    font-size: 12px;
    line-height: 1.6;
}

.rh-flow-side-image {
    width: 112px;
    height: 112px;

    display: block;

    margin: 0 auto 14px;

    object-fit: contain;

    filter:
        drop-shadow(0 10px 12px rgba(0, 0, 0, 0.52));
}


/* =========================================================
   FORM
   ========================================================= */

.rh-flow-form {
    display: grid;
    gap: 15px;
}

.rh-flow-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.rh-flow-field {
    display: block;

    padding: 14px 15px;

    border: 1px solid #354048;
    border-radius: 3px;

    background: #090d10;

    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease;
}

.rh-flow-field:focus-within {
    border-color: var(--rh-red);

    box-shadow:
        0 0 0 2px rgba(219, 60, 25, 0.10);
}

.rh-flow-field > span,
.rh-flow-field > small {
    display: block;
}

.rh-flow-field > span {
    color: #e6ebee;

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

    text-transform: uppercase;
    letter-spacing: 0.055em;
}

.rh-flow-field > small {
    margin: 3px 0 10px;

    color: #68757d;

    font-size: 10px;
}

.rh-flow-field input {
    width: 100%;

    box-sizing: border-box;

    padding: 0;

    border: 0;
    outline: 0;

    background: transparent;

    color: #ffffff;

    font: 800 15px/1.4 Arial, sans-serif;
}

.rh-flow-field input::placeholder {
    color: #56626a;

    font-weight: 600;
}

.rh-flow-confirm {
    display: flex;
    align-items: center;
    gap: 10px;

    padding: 2px 0;

    color: #a5afb5;

    font-size: 12px;
}

.rh-flow-confirm input {
    accent-color: var(--rh-red);
}


/* =========================================================
   BUTTONS
   ========================================================= */

.rh-flow-primary,
.rh-flow-secondary,
.rh-flow-remove,
.rh-flow-download {
    min-height: 48px;

    box-sizing: border-box;

    border-radius: 3px;

    font-family: inherit;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.05em;

    cursor: pointer;
}

.rh-flow-primary {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 20px;

    border: 1px solid var(--rh-red);

    background:
        linear-gradient(
            180deg,
            #50180d,
            #26100b
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 12px;

    transition:
        transform 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.rh-flow-primary:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            180deg,
            #6d1f0f,
            #35120a
        );

    box-shadow:
        0 0 24px rgba(219, 60, 25, 0.15);
}

.rh-flow-secondary {
    width: 100%;

    padding: 0 18px;

    border: 1px solid #46525a;

    background: #11171b;

    color: #c7d0d5;

    font-size: 11px;
}

.rh-flow-remove {
    min-width: 156px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 0 16px;

    border: 1px solid #643226;

    background: #1a0e0b;

    color: #e4aaa0;

    font-size: 10px;
}

.rh-flow-remove img {
    width: 26px;
    height: 26px;

    object-fit: contain;
}

.rh-flow-download {
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 16px;

    border: 1px solid #4c5b64;

    background:
        linear-gradient(
            180deg,
            #182128,
            #0b1013
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 10px;
}

.rh-flow-action-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;

    margin-top: 18px;
}

.rh-flow-remove-form {
    margin: 0;
}


/* =========================================================
   HELP / SIDE CONTENT
   ========================================================= */

.rh-flow-help-row {
    padding: 10px 0;

    border-bottom: 1px solid #242c31;
}

.rh-flow-help-row:last-of-type {
    border-bottom: 0;
}

.rh-flow-help-row strong,
.rh-flow-help-row span {
    display: block;
}

.rh-flow-help-row strong {
    margin-bottom: 3px;

    color: #dce3e7;

    font-size: 11px;
}

.rh-flow-help-row span {
    color: #758189;

    font-size: 10px;
    line-height: 1.45;
}

.rh-flow-side-note,
.rh-flow-side-callout {
    margin-top: 16px !important;
    padding: 10px 11px;

    border-left: 3px solid var(--rh-red);

    background: rgba(99, 31, 17, 0.13);

    color: #9eaaaf !important;

    font-size: 10px !important;
}

.rh-flow-example {
    margin: 14px 0;

    padding: 12px;

    border: 1px solid #303a41;
    border-radius: 3px;

    background: #090d10;
}

.rh-flow-example small,
.rh-flow-example strong,
.rh-flow-example span {
    display: block;
}

.rh-flow-example small {
    color: var(--rh-red-bright);

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.rh-flow-example strong {
    margin: 4px 0;

    color: #ffffff;

    font-family: Consolas, monospace;
    font-size: 13px;
}

.rh-flow-example span {
    color: #65717a;

    font-size: 9px;
}


/* =========================================================
   CURRENT SERVER / STATUS
   ========================================================= */

.rh-flow-current-server {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;

    padding: 16px;

    border: 1px solid #343f46;
    border-radius: 3px;

    background: #090d10;
}

.rh-flow-current-server small,
.rh-flow-current-server strong,
.rh-flow-current-server span {
    display: block;
}

.rh-flow-current-server small {
    color: #6d7981;

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.11em;
}

.rh-flow-current-server strong {
    margin: 4px 0;

    color: #ffffff;

    font-size: 15px;
}

.rh-flow-current-server span {
    color: #76838a;

    font-size: 10px;
}

.rh-flow-status-badge {
    flex-shrink: 0;

    padding: 7px 9px;

    border: 1px solid rgba(240, 74, 36, 0.52);
    border-radius: 3px;

    background: rgba(219, 60, 25, 0.10);

    color: #f38c72 !important;

    font-size: 8px !important;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rh-flow-status-ready {
    border-color: rgba(53, 210, 138, 0.42);

    background: rgba(53, 210, 138, 0.08);

    color: #81deb2 !important;
}

.rh-flow-server-chip {
    display: inline-flex;

    margin: 0 0 18px;
    padding: 10px 12px;

    border: 1px solid #344048;
    border-radius: 3px;

    background: #090d10;

    color: #e4eaed;

    font-family: Consolas, monospace;
    font-size: 12px;
}


/* =========================================================
   MINI STEPS
   ========================================================= */

.rh-flow-mini-steps {
    display: grid;
    gap: 8px;

    margin-top: 14px;
}

.rh-flow-mini-steps span {
    padding: 9px 10px;

    border: 1px solid #2d363c;
    border-radius: 3px;

    background: #0b1013;

    color: #6d7981;

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

.rh-flow-mini-steps span.is-done {
    border-color: rgba(53, 210, 138, 0.28);

    color: #8ddfba;
}

.rh-flow-mini-steps span.is-current {
    border-color: rgba(240, 74, 36, 0.40);

    color: #f0a08c;
}


/* =========================================================
   NOTICES
   ========================================================= */

.rh-flow-notice {
    margin: 0 0 18px;
    padding: 12px 14px;

    border: 1px solid #3c474e;
    border-left-width: 3px;
    border-radius: 3px;

    background: rgba(14, 19, 22, 0.92);

    color: #c5ced3;

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

.rh-flow-notice p {
    margin: 0;
}

.rh-flow-notice-error {
    border-left-color: #cf5546;

    background: rgba(91, 28, 21, 0.18);

    color: #edc3bd;
}

.rh-flow-notice-warning {
    border-left-color: var(--rh-red-bright);

    background: rgba(97, 31, 17, 0.14);
}

.rh-flow-notice-success {
    border-left-color: var(--rh-green);

    background: rgba(23, 82, 58, 0.14);

    color: #b6e4ce;
}


/* =========================================================
   VERIFY - INSTALL
   ========================================================= */

.rh-onboarding-screen {
    display: none;
}

.rh-onboarding-screen.is-active {
    display: block;
}

.rh-flow-install-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;

    margin-bottom: 18px;
}

.rh-flow-install-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 230px;

    padding: 18px;

    box-sizing: border-box;

    border: 1px solid #343f46;
    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            #10161a,
            #090d10
        );
}

.rh-flow-install-number {
    display: grid;
    place-items: center;

    width: 31px;
    height: 31px;

    margin-bottom: 14px;

    border: 1px solid var(--rh-red);
    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            #d84421,
            #8e2513
        );

    color: #ffffff;

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

.rh-flow-install-card h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;

    text-transform: uppercase;
}

.rh-flow-install-card p {
    margin: 0 0 16px;

    color: #849098;

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

.rh-flow-install-card .rh-flow-download,
.rh-flow-install-card .rh-flow-plugin-paths {
    margin-top: auto;
}

.rh-flow-plugin-paths {
    display: grid;
    gap: 8px;
}

.rh-flow-plugin-paths > div {
    padding: 9px 10px;

    border: 1px solid #2e383f;
    border-radius: 3px;

    background: #070b0d;
}

.rh-flow-plugin-paths small,
.rh-flow-plugin-paths code {
    display: block;
}

.rh-flow-plugin-paths small {
    margin-bottom: 4px;

    color: var(--rh-red-bright);

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
}

.rh-flow-plugin-paths code {
    color: #d9e0e4;

    font: 700 10px/1.4 Consolas, monospace;
}

.rh-flow-trust-list {
    display: grid;
    gap: 8px;
}

.rh-flow-trust-list > div {
    padding: 10px 11px;

    border: 1px solid #2d373d;
    border-radius: 3px;

    background: #0a0f12;
}

.rh-flow-trust-list strong,
.rh-flow-trust-list span {
    display: block;
}

.rh-flow-trust-list strong {
    color: #dfe5e8;

    font-size: 10px;
}

.rh-flow-trust-list span {
    margin-top: 3px;

    color: #6f7c84;

    font-size: 9px;
}


/* =========================================================
   VERIFY - COMMAND
   ========================================================= */

.rh-flow-console-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    margin-bottom: 16px;
}

.rh-flow-console-steps > div {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    padding: 11px;

    border: 1px solid #303a41;
    border-radius: 3px;

    background: #0b1013;
}

.rh-flow-console-steps span {
    display: grid;
    place-items: center;

    flex: 0 0 24px;
    width: 24px;
    height: 24px;

    border: 1px solid var(--rh-red);
    border-radius: 3px;

    color: #ffffff;

    font-size: 9px;
    font-weight: 900;
}

.rh-flow-console-steps p {
    margin: 1px 0 0;

    color: #849098;

    font-size: 10px;
    line-height: 1.45;
}

.rh-flow-command-card {
    margin-bottom: 16px;
    padding: 14px;

    border: 1px solid #344048;
    border-radius: 3px;

    background: #090d10;
}

.rh-flow-command-card-primary {
    border-color: #4a3b35;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(219, 60, 25, 0.07),
            transparent 35%
        ),
        #090d10;
}

.rh-flow-command-card > div:first-child small,
.rh-flow-command-card > div:first-child strong {
    display: block;
}

.rh-flow-command-card > div:first-child small {
    color: #6f7b83;

    font-size: 8px;
    font-weight: 900;

    text-transform: uppercase;
}

.rh-flow-command-card > div:first-child strong {
    margin: 3px 0 10px;

    color: #ffffff;

    font-size: 13px;
}

.rh-private-command-wrap,
.rh-command-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;

    border: 1px solid #3b464e;
    border-radius: 3px;

    background: #050809;

    overflow: hidden;
}

.rh-private-command-wrap textarea,
.rh-command-row input {
    width: 100%;

    box-sizing: border-box;

    padding: 13px 14px;

    border: 0;
    outline: 0;

    resize: none;

    background: transparent;

    color: #ffffff;

    font: 700 12px/1.45 Consolas, monospace;
}

.rh-copy-button {
    min-width: 74px;

    border: 0;
    border-left: 1px solid #303a41;

    background: #171d21;

    color: #ffffff;

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

    cursor: pointer;
}

.rh-copy-button:hover {
    background: #242d33;
}

.rh-copy-status {
    min-height: 14px;

    margin: 6px 0 0;

    color: #7e8a92;

    font-size: 9px;
}

.rh-expiry {
    margin-top: 7px;

    color: #6f7b83;

    font-size: 9px;
}

.rh-flow-command-explain {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 12px;

    margin-bottom: 18px;
    padding: 14px;

    border: 1px solid #333e45;
    border-radius: 3px;

    background: #0b1013;
}

.rh-flow-command-explain > span {
    display: grid;
    place-items: center;

    width: 30px;
    height: 30px;

    border: 1px solid var(--rh-red);
    border-radius: 3px;

    color: #ffffff;

    font-size: 10px;
    font-weight: 900;
}

.rh-flow-command-explain strong {
    display: block;

    color: #ffffff;

    font-size: 12px;
}

.rh-flow-command-explain p {
    margin: 4px 0 0;

    color: #849098;

    font-size: 10px;
    line-height: 1.5;
}

.rh-flow-issue-form {
    display: grid;
    gap: 14px;
}

.rh-flow-secondary-form {
    margin-top: 10px;
}

.rh-flow-text-button {
    display: block;

    margin: 12px auto 0;
    padding: 6px 8px;

    border: 0;

    background: transparent;

    color: #738088;

    font-size: 10px;

    cursor: pointer;
}

.rh-flow-text-button:hover {
    color: #ffffff;
}

.rh-flow-text-link {
    color: #929ea5;

    font-size: 10px;

    text-decoration: underline;
    text-underline-offset: 3px;
}


/* =========================================================
   CLEANUP OLD PENDING SETUPS
   ========================================================= */

.rh-flow-cleanup {
    margin-top: 18px;

    padding: 18px;

    border: 1px solid #303a41;
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            rgba(15, 20, 24, 0.96),
            rgba(9, 13, 15, 0.96)
        );
}

.rh-flow-cleanup-heading {
    display: flex;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 12px;
}

.rh-flow-cleanup-heading h3 {
    margin: 4px 0 0;

    color: #ffffff;

    font-size: 17px;
}

.rh-flow-cleanup-heading > p {
    max-width: 460px;

    margin: 0;

    color: #7d8991;

    font-size: 10px;
    line-height: 1.5;
}

.rh-flow-cleanup-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: center;
    gap: 10px;

    padding: 10px 11px;

    border-top: 1px solid #293137;
}

.rh-flow-cleanup-row strong,
.rh-flow-cleanup-row span {
    display: block;
}

.rh-flow-cleanup-row strong {
    color: #ffffff;

    font-size: 11px;
}

.rh-flow-cleanup-row span {
    margin-top: 2px;

    color: #6f7b83;

    font-size: 9px;
}

.rh-flow-icon-button {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    padding: 5px;

    border: 1px solid #5b3128;
    border-radius: 3px;

    background: #180d0b;

    cursor: pointer;
}

.rh-flow-icon-button img {
    width: 28px;
    height: 28px;

    object-fit: contain;
}


/* =========================================================
   COMING SOON
   ========================================================= */

.rh-flow-coming-soon {
    padding: 13px 14px;

    border: 1px dashed #465159;
    border-radius: 3px;

    background: rgba(255, 255, 255, 0.015);

    color: #8d999f;

    font-size: 11px;

    text-align: center;
}


/* =========================================================
   CHECKING OVERLAY
   ========================================================= */

.rh-checking-screen {
    position: fixed;
    z-index: 100;

    inset: 0;

    display: grid;
    align-content: center;
    justify-items: center;

    padding: 28px;

    background:
        rgba(4, 7, 9, 0.94);

    text-align: center;
}

.rh-checking-screen[hidden] {
    display: none;
}

.rh-checking-screen > img {
    width: 110px;
    height: 110px;

    object-fit: contain;

    filter:
        drop-shadow(0 0 20px rgba(30, 154, 255, 0.22));
}

.rh-checking-screen h2 {
    margin: 7px 0 16px;

    color: #ffffff;

    font-size: 28px;

    text-transform: uppercase;
}

.rh-checking-screen > p:last-child {
    max-width: 480px;

    color: #89959c;

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

.rh-check-bar {
    width: min(480px, 80vw);
    height: 7px;

    margin-bottom: 12px;

    border: 1px solid #343e45;

    background: #080c0e;

    overflow: hidden;
}

.rh-check-bar span {
    display: block;

    width: 34%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            #a62b13,
            var(--rh-red-bright)
        );

    animation:
        rh-flow-check-slide
        1.25s
        ease-in-out
        infinite
        alternate;
}

@keyframes rh-flow-check-slide {
    to {
        transform: translateX(190%);
    }
}


/* =========================================================
   MOBILE / TABLET
   ========================================================= */

@media (max-width: 900px) {

    .rh-flow-page {
        padding: 30px 18px 60px;
    }

    .rh-flow-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .rh-flow-heading-server {
        width: 100%;

        text-align: left;
    }

    .rh-flow-progress {
        grid-template-columns: 1fr;
    }

    .rh-flow-progress > li {
        min-height: 80px;
    }

    .rh-flow-workspace {
        grid-template-columns: 1fr;
    }

    .rh-flow-panel-side {
        position: static;
    }

    .rh-flow-install-grid {
        grid-template-columns: 1fr;
    }

    .rh-flow-install-card {
        min-height: auto;
    }

    .rh-flow-console-steps {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 620px) {

    .rh-flow-page {
        padding:
            24px
            12px
            48px;
    }

    .rh-flow-page-heading h1 {
        font-size: 29px;
    }

    .rh-flow-panel-main,
    .rh-flow-panel-side {
        padding: 18px;
    }

    .rh-flow-panel-heading {
        grid-template-columns: 68px minmax(0, 1fr);

        gap: 12px;
    }

    .rh-flow-heading-image {
        width: 64px;
        height: 64px;
    }

    .rh-flow-panel-heading h2 {
        font-size: 25px;
    }

    .rh-flow-field-grid {
        grid-template-columns: 1fr;
    }

    .rh-flow-action-row {
        grid-template-columns: 1fr;
    }

    .rh-flow-remove {
        width: 100%;
    }

    .rh-flow-current-server {
        align-items: flex-start;
        flex-direction: column;
    }

    .rh-flow-install-card {
        padding: 15px;
    }

    .rh-private-command-wrap,
    .rh-command-row {
        grid-template-columns: 1fr;
    }

    .rh-copy-button {
        min-height: 40px;

        border-left: 0;
        border-top: 1px solid #303a41;
    }

    .rh-flow-cleanup-heading {
        flex-direction: column;
    }
}


@media (prefers-reduced-motion: reduce) {

    .rh-check-bar span {
        animation: none;
    }
}


/* =========================================================
   V2.1 - DESKTOP READABILITY / EQUAL HEIGHT PANELS
   ========================================================= */


/* Use more of the available desktop website width */

.rh-flow-shell {
    width: min(1320px, 100%);
}


/* Make the right-hand help panel exactly as tall as the main panel */

.rh-flow-workspace {
    grid-template-columns:
        minmax(0, 1.78fr)
        minmax(360px, 0.82fr);

    gap: 22px;

    align-items: stretch;
}

.rh-flow-panel {
    box-sizing: border-box;
}

.rh-flow-panel-side {
    position: static;

    height: 100%;

    padding: 30px;

    box-sizing: border-box;
}


/* Keep this particular Step 2 title on one line on desktop */

.rh-flow-single-line-title {
    white-space: nowrap;

    font-size: clamp(27px, 2.35vw, 33px) !important;
    letter-spacing: 0.008em !important;
}


/* =========================================================
   LARGER BODY / SUPPORTING TEXT
   Titles stay at their existing sizes.
   ========================================================= */

.rh-flow-page-heading p {
    font-size: 16px;
    line-height: 1.65;
}

.rh-flow-eyebrow {
    font-size: 11px !important;
}

.rh-flow-step-copy small {
    font-size: 9px;
}

.rh-flow-step-copy strong {
    font-size: 15px;
}

.rh-flow-step-copy span {
    margin-top: 5px;

    font-size: 12px;
    line-height: 1.4;
}

.rh-flow-panel-heading p:not(.rh-flow-eyebrow) {
    font-size: 15px;
    line-height: 1.65;
}

.rh-flow-panel-side h3 {
    margin-bottom: 16px;

    font-size: 21px;
}

.rh-flow-panel-side p {
    margin-bottom: 20px;

    font-size: 15px;
    line-height: 1.7;
}

.rh-flow-side-note,
.rh-flow-side-callout {
    padding: 13px 14px;

    font-size: 12px !important;
    line-height: 1.6;
}

.rh-flow-help-row {
    padding: 13px 0;
}

.rh-flow-help-row strong {
    margin-bottom: 5px;

    font-size: 13px;
}

.rh-flow-help-row span {
    font-size: 12px;
    line-height: 1.55;
}

.rh-flow-example small {
    font-size: 9px;
}

.rh-flow-example strong {
    font-size: 15px;
}

.rh-flow-example span {
    font-size: 11px;
}

.rh-flow-field > span {
    font-size: 13px;
}

.rh-flow-field > small {
    margin-top: 5px;

    font-size: 12px;
}

.rh-flow-field input {
    font-size: 17px;
}

.rh-flow-confirm {
    font-size: 14px;
}

.rh-flow-primary {
    min-height: 54px;

    font-size: 13px;
}

.rh-flow-remove {
    min-height: 54px;

    font-size: 11px;
}

.rh-flow-current-server {
    padding: 19px;
}

.rh-flow-current-server small {
    font-size: 9px;
}

.rh-flow-current-server strong {
    font-size: 17px;
}

.rh-flow-current-server span {
    font-size: 12px;
}

.rh-flow-status-badge {
    padding: 8px 11px;

    font-size: 9px !important;
}

.rh-flow-mini-steps {
    gap: 10px;

    margin-top: 18px;
}

.rh-flow-mini-steps span {
    padding: 12px 13px;

    font-size: 13px;
    line-height: 1.35;
}

.rh-flow-notice {
    padding: 14px 16px;

    font-size: 13px;
    line-height: 1.6;
}

.rh-flow-install-card h3 {
    font-size: 17px;
}

.rh-flow-install-card p {
    font-size: 13px;
    line-height: 1.6;
}

.rh-flow-plugin-paths small {
    font-size: 9px;
}

.rh-flow-plugin-paths code {
    font-size: 12px;
}

.rh-flow-trust-list strong {
    font-size: 12px;
}

.rh-flow-trust-list span {
    margin-top: 4px;

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

.rh-flow-console-steps p {
    font-size: 12px;
    line-height: 1.55;
}

.rh-flow-command-card > div:first-child small {
    font-size: 9px;
}

.rh-flow-command-card > div:first-child strong {
    font-size: 15px;
}

.rh-private-command-wrap textarea,
.rh-command-row input {
    font-size: 14px;
}

.rh-copy-button {
    font-size: 11px;
}

.rh-copy-status,
.rh-expiry {
    font-size: 11px;
}

.rh-flow-command-explain strong {
    font-size: 14px;
}

.rh-flow-command-explain p {
    font-size: 12px;
    line-height: 1.6;
}

.rh-flow-coming-soon {
    padding: 15px 16px;

    font-size: 13px;
}


/* Let the right-side explanation breathe vertically */

.rh-flow-panel-side .rh-flow-mini-steps {
    margin-top: 22px;
}


/* =========================================================
   RESPONSIVE FALLBACK
   Allow the Step 2 heading to wrap only when the screen needs it.
   ========================================================= */

@media (max-width: 1100px) {

    .rh-flow-workspace {
        grid-template-columns:
            minmax(0, 1.55fr)
            minmax(320px, 0.85fr);
    }

    .rh-flow-single-line-title {
        font-size: 27px !important;
    }
}


@media (max-width: 900px) {

    .rh-flow-workspace {
        grid-template-columns: 1fr;
    }

    .rh-flow-single-line-title {
        white-space: normal;

        font-size: 30px !important;
    }

    .rh-flow-panel-side {
        height: auto;
    }
}


@media (max-width: 620px) {

    .rh-flow-page-heading p {
        font-size: 14px;
    }

    .rh-flow-panel-heading p:not(.rh-flow-eyebrow),
    .rh-flow-panel-side p {
        font-size: 13px;
    }

    .rh-flow-step-copy strong {
        font-size: 13px;
    }

    .rh-flow-step-copy span {
        font-size: 11px;
    }

    .rh-flow-mini-steps span {
        font-size: 12px;
    }
}


/* =========================================================
   V2.2 - KEEP MAIN PAGE TITLE ON ONE LINE ON DESKTOP
   ========================================================= */

.rh-flow-page-heading h1 {
    white-space: nowrap;

    font-size: clamp(30px, 3vw, 42px);
}


/* Let it wrap only when the screen is genuinely too narrow */

@media (max-width: 900px) {

    .rh-flow-page-heading h1 {
        white-space: normal;
    }
}


/* =========================================================
   V2.3 - SMART VERIFY FLOW
   Show one verification task at a time.
   ========================================================= */

.rh-smart-verify-panel {
    min-height: 470px;
}

.rh-smart-verify-step {
    width: 100%;

    padding: 24px;

    box-sizing: border-box;

    border: 1px solid #344048;
    border-radius: 4px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(219, 60, 25, 0.07),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #10161a,
            #090d10
        );

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.025),
        0 14px 34px rgba(0, 0, 0, 0.20);
}

.rh-smart-verify-step[hidden] {
    display: none !important;
}

.rh-smart-step-heading {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 15px;
    align-items: start;

    margin-bottom: 22px;
}

.rh-smart-step-number {
    display: grid;
    place-items: center;

    width: 46px;
    height: 46px;

    border: 1px solid var(--rh-red-bright);
    border-radius: 4px;

    background:
        linear-gradient(
            180deg,
            #e34a25,
            #8f2513
        );

    color: #ffffff;

    box-shadow:
        0 0 16px rgba(240, 74, 36, 0.20),
        0 8px 18px rgba(0, 0, 0, 0.28);

    font-size: 16px;
    font-weight: 950;
}

.rh-smart-step-heading small {
    display: block;

    margin: 1px 0 5px;

    color: var(--rh-red-bright);

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

    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.rh-smart-step-heading h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 22px;
    font-weight: 950;
    line-height: 1.15;

    text-transform: uppercase;
    letter-spacing: 0.018em;
}

.rh-smart-step-heading p {
    margin: 0;

    max-width: 720px;

    color: #9ca7ad;

    font-size: 15px;
    line-height: 1.65;
}

.rh-smart-download-button {
    width: 100%;
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0 22px;

    box-sizing: border-box;

    border: 1px solid var(--rh-red);
    border-radius: 3px;

    background:
        linear-gradient(
            180deg,
            #55190d,
            #28100b
        );

    color: #ffffff;

    text-decoration: none;

    font-size: 14px;
    font-weight: 950;

    text-transform: uppercase;
    letter-spacing: 0.05em;

    transition:
        transform 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.rh-smart-download-button:hover {
    transform: translateY(-1px);

    background:
        linear-gradient(
            180deg,
            #731f0f,
            #35120a
        );

    box-shadow:
        0 0 24px rgba(219, 60, 25, 0.16);
}

.rh-smart-step-note {
    margin: 12px 0 0;

    color: #718087;

    font-size: 12px;
    line-height: 1.55;

    text-align: center;
}

.rh-smart-plugin-paths {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;

    margin-bottom: 16px;
}

.rh-smart-plugin-paths > div {
    padding: 14px 15px;

    border: 1px solid #303a41;
    border-radius: 3px;

    background: #070b0d;
}

.rh-smart-plugin-paths small,
.rh-smart-plugin-paths code {
    display: block;
}

.rh-smart-plugin-paths small {
    margin-bottom: 6px;

    color: var(--rh-red-bright);

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

    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rh-smart-plugin-paths code {
    color: #e1e7ea;

    font: 800 13px/1.45 Consolas, monospace;
}

.rh-smart-install-help {
    margin-bottom: 18px;
    padding: 12px 14px;

    border-left: 3px solid #45535c;

    background: rgba(255, 255, 255, 0.018);
}

.rh-smart-install-help strong,
.rh-smart-install-help span {
    display: block;
}

.rh-smart-install-help strong {
    margin-bottom: 3px;

    color: #dce3e7;

    font-size: 12px;
}

.rh-smart-install-help span {
    color: #7f8c93;

    font-size: 12px;
    line-height: 1.5;
}

.rh-smart-step-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;

    margin-top: 14px;
}

.rh-smart-step-links a,
.rh-smart-step-links button {
    appearance: none;

    padding: 5px 4px;

    border: 0;

    background: transparent;

    color: #77858d;

    font: inherit;
    font-size: 11px;

    text-decoration: underline;
    text-underline-offset: 3px;

    cursor: pointer;
}

.rh-smart-step-links a:hover,
.rh-smart-step-links button:hover {
    color: #ffffff;
}

.rh-smart-current-task {
    margin-top: 20px;
    padding: 13px 14px;

    border: 1px solid rgba(240, 74, 36, 0.30);
    border-radius: 3px;

    background: rgba(219, 60, 25, 0.07);
}

.rh-smart-current-task small,
.rh-smart-current-task strong {
    display: block;
}

.rh-smart-current-task small {
    margin-bottom: 4px;

    color: #7d8a91;

    font-size: 9px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.10em;
}

.rh-smart-current-task strong {
    color: #ffffff;

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

@media (max-width: 900px) {

    .rh-smart-verify-panel {
        min-height: 0;
    }
}

@media (max-width: 620px) {

    .rh-smart-verify-step {
        padding: 18px;
    }

    .rh-smart-step-heading {
        grid-template-columns: 42px minmax(0, 1fr);

        gap: 11px;
    }

    .rh-smart-step-number {
        width: 38px;
        height: 38px;

        font-size: 13px;
    }

    .rh-smart-step-heading h3 {
        font-size: 18px;
    }

    .rh-smart-step-heading p {
        font-size: 13px;
    }

    .rh-smart-plugin-paths {
        grid-template-columns: 1fr;
    }

    .rh-smart-step-links {
        flex-direction: column;
        gap: 5px;
    }
}


/* =========================================================
   V2.4 - DIRECT HTTPS VERIFICATION
   ========================================================= */

.rh-direct-verify-wait {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    padding: 15px 16px;
    border: 1px solid #37434a;
    border-radius: 4px;
    background: linear-gradient(180deg, rgba(15,22,26,.98), rgba(8,13,15,.98));
}

.rh-direct-verify-pulse {
    position: relative;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(46,162,255,.40);
    border-radius: 50%;
    box-shadow: 0 0 14px rgba(46,162,255,.20);
}

.rh-direct-verify-pulse::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: #2ea2ff;
    animation: rh-direct-pulse 1.35s ease-in-out infinite;
}

.rh-direct-verify-wait small,
.rh-direct-verify-wait strong,
.rh-direct-verify-wait p { display: block; }

.rh-direct-verify-wait small {
    margin-bottom: 3px;
    color: #75828a;
    font-size: 9px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .10em;
}

.rh-direct-verify-wait strong {
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.rh-direct-verify-wait p {
    margin: 4px 0 0;
    color: #8d999f;
    font-size: 12px;
    line-height: 1.5;
}

.rh-direct-check-now {
    min-height: 38px;
    padding: 0 13px;
    border: 1px solid #46545d;
    border-radius: 3px;
    background: #11181c;
    color: #d9e1e5;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
    cursor: pointer;
}

.rh-direct-check-now:hover { border-color: var(--rh-red); color: #fff; }

.rh-direct-verify-wait[data-state="success"] {
    border-color: rgba(53,210,138,.48);
    background: rgba(23,85,59,.16);
}

.rh-direct-verify-wait[data-state="success"] .rh-direct-verify-pulse {
    border-color: rgba(53,210,138,.55);
}

.rh-direct-verify-wait[data-state="success"] .rh-direct-verify-pulse::after {
    background: var(--rh-green);
    animation: none;
}

.rh-direct-verify-wait[data-state="expired"],
.rh-direct-verify-wait[data-state="error"] {
    border-color: rgba(240,74,36,.46);
    background: rgba(104,31,16,.14);
}

.rh-direct-success {
    margin-bottom: 18px;
    padding: 16px 17px;
    border: 1px solid rgba(53,210,138,.42);
    border-left: 3px solid var(--rh-green);
    border-radius: 3px;
    background: rgba(24,82,58,.15);
}

.rh-direct-success strong,
.rh-direct-success span { display: block; }
.rh-direct-success strong { color: #d9f5e8; font-size: 15px; font-weight: 900; }
.rh-direct-success span { margin-top: 5px; color: #9fc8b4; font-size: 12px; line-height: 1.55; }

@keyframes rh-direct-pulse {
    0%,100% { opacity: .45; transform: scale(.72); }
    50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 680px) {
    .rh-direct-verify-wait { grid-template-columns: 28px minmax(0,1fr); }
    .rh-direct-check-now { grid-column: 1 / -1; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .rh-direct-verify-pulse::after { animation: none; }
}


/* =========================================================
   V3 - PREMIUM ADD SERVER PAGE
   Locked visual direction: 2026-09-15
   Scoped to add-server.php only so verify-server.php keeps its
   existing verification UI and behaviour.
   ========================================================= */

.rh-add-server-page {
    width: 100%;
    max-width: none;
    min-height: calc(100vh - 82px);
    padding: 0 28px 84px;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% -8%, rgba(219, 60, 25, 0.09), transparent 34%),
        linear-gradient(180deg, #070a0c 0%, #090d10 48%, #070a0c 100%);
}

.rh-add-server-page::before {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.010) 0 1px,
            transparent 1px 6px
        );
    opacity: 0.7;
}

.rh-add-server-page .rh-flow-shell {
    width: min(1480px, 100%);
    max-width: 1480px;
    margin: 0 auto;
}


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

.rh-add-server-page .rh-add-hero {
    position: relative;
    min-height: 230px;
    margin: 0 0 28px;
    padding: 44px 46px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-left: 1px solid rgba(78, 91, 99, 0.62);
    border-right: 1px solid rgba(78, 91, 99, 0.62);
    border-bottom: 1px solid #313b42;
    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 10, 0.98) 0%,
            rgba(5, 8, 10, 0.93) 37%,
            rgba(5, 8, 10, 0.52) 66%,
            rgba(5, 8, 10, 0.20) 100%
        ),
        url('/assets/images/home/scene-forest.webp') center 48% / cover no-repeat;
    box-shadow:
        inset 0 -1px rgba(255, 255, 255, 0.025),
        0 22px 55px rgba(0, 0, 0, 0.30);
}

.rh-add-server-page .rh-add-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 78% 42%, rgba(240, 74, 36, 0.13), transparent 25%),
        linear-gradient(180deg, transparent 65%, rgba(0, 0, 0, 0.42));
}

.rh-add-server-page .rh-add-hero-copy {
    position: relative;
    z-index: 1;
    width: min(800px, 72%);
}

.rh-add-server-page .rh-add-hero .rh-flow-eyebrow {
    margin-bottom: 12px;
    font-size: 12px !important;
    letter-spacing: 0.19em;
}

.rh-add-server-page .rh-add-hero h1 {
    max-width: 900px;
    margin: 0 0 12px;
    white-space: normal;
    color: #ffffff;
    font-size: clamp(42px, 4.3vw, 64px);
    font-weight: 950;
    line-height: 0.98;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    text-wrap: balance;
}

.rh-add-server-page .rh-add-hero h1 span {
    color: var(--rh-red-bright);
    text-shadow: 0 0 24px rgba(240, 74, 36, 0.12);
}

.rh-add-server-page .rh-add-hero p:not(.rh-flow-eyebrow) {
    max-width: 760px;
    margin: 0;
    color: #c1c9ce;
    font-size: 17px;
    line-height: 1.65;
}


/* ---------- LARGE 3-STEP FLOW ---------- */

.rh-add-server-page .rh-flow-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 38px;
    margin: 0 0 28px;
}

.rh-add-server-page .rh-flow-progress > li {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    min-height: 112px;
    padding: 18px 24px;
    border: 1px solid #344149;
    border-radius: 4px;
    background:
        radial-gradient(circle at 20% 50%, rgba(48, 84, 106, 0.09), transparent 34%),
        linear-gradient(180deg, rgba(15, 22, 26, 0.99), rgba(8, 13, 16, 0.99));
    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.025);
    opacity: 1;
}

.rh-add-server-page .rh-flow-progress > li::before {
    width: 3px;
    background: #3a464e;
}

.rh-add-server-page .rh-flow-progress > li:not(:last-child)::after {
    content: "›";
    position: absolute;
    z-index: 4;
    right: -28px;
    top: 50%;
    transform: translateY(-52%);
    color: #e2e7ea;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
}

.rh-add-server-page .rh-flow-progress > li.is-active {
    border-color: var(--rh-red-bright);
    background:
        radial-gradient(circle at 18% 50%, rgba(240, 74, 36, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(41, 20, 15, 0.99), rgba(18, 12, 11, 0.99));
    box-shadow:
        0 0 0 1px rgba(240, 74, 36, 0.12),
        0 0 28px rgba(219, 60, 25, 0.12),
        0 20px 42px rgba(0, 0, 0, 0.32);
}

.rh-add-server-page .rh-flow-progress > li.is-active::before {
    background: var(--rh-red-bright);
    box-shadow: 0 0 18px rgba(240, 74, 36, 0.48);
}

.rh-add-server-page .rh-flow-progress > li.is-done {
    border-color: rgba(53, 210, 138, 0.34);
}

.rh-add-server-page .rh-flow-progress > li.is-done::before {
    background: var(--rh-green);
}

.rh-add-server-page .rh-flow-progress > li.is-locked {
    opacity: 0.78;
}

.rh-add-server-page .rh-flow-step-icon {
    position: relative;
    display: grid;
    grid-template-columns: 52px 72px;
    align-items: center;
    gap: 12px;
    width: 136px;
    height: auto;
}

.rh-add-server-page .rh-flow-step-number {
    position: static;
    display: grid;
    place-items: center;
    width: 48px;
    min-width: 48px;
    height: 48px;
    padding: 0;
    border: 1px solid #5c6971;
    border-radius: 50%;
    background: rgba(6, 10, 12, 0.88);
    color: #d5dce0;
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
}

.rh-add-server-page .rh-flow-progress > li.is-active .rh-flow-step-number {
    border-color: var(--rh-red-bright);
    background: rgba(24, 11, 8, 0.88);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(240, 74, 36, 0.16);
}

.rh-add-server-page .rh-flow-progress > li.is-done .rh-flow-step-number {
    border-color: rgba(53, 210, 138, 0.62);
    color: #d8f8e8;
}

.rh-add-server-page .rh-flow-step-icon > img:not(.rh-flow-step-lock) {
    width: 72px;
    height: 72px;
    object-fit: contain;
    filter:
        drop-shadow(0 9px 12px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 10px rgba(41, 142, 235, 0.12));
}

.rh-add-server-page .rh-flow-step-lock {
    display: none;
}

.rh-add-server-page .rh-flow-step-copy small {
    display: none;
}

.rh-add-server-page .rh-flow-step-copy strong {
    color: #ffffff;
    font-size: 17px;
    font-weight: 950;
    line-height: 1.18;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.rh-add-server-page .rh-flow-step-copy span {
    margin-top: 7px;
    color: #a2adb3;
    font-size: 13px;
    line-height: 1.45;
}


/* ---------- MAIN FORM / HELP GRID ---------- */

.rh-add-server-page .rh-flow-workspace {
    grid-template-columns: minmax(0, 1.48fr) minmax(400px, 0.95fr);
    gap: 24px;
    align-items: stretch;
}

.rh-add-server-page .rh-flow-workspace-single {
    grid-template-columns: minmax(0, 1fr);
}

.rh-add-server-page .rh-flow-panel {
    border: 1px solid #35424a;
    border-radius: 4px;
    background:
        radial-gradient(circle at 0 0, rgba(36, 90, 119, 0.055), transparent 32%),
        linear-gradient(180deg, rgba(13, 20, 24, 0.995), rgba(8, 13, 16, 0.995));
    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.34),
        inset 0 1px rgba(255, 255, 255, 0.025);
}

.rh-add-server-page .rh-flow-panel-main {
    padding: 34px 38px 38px;
}

.rh-add-server-page .rh-flow-panel-side {
    position: static;
    height: 100%;
    padding: 32px;
}

.rh-add-server-page .rh-flow-panel-heading {
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 22px;
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px solid #2d383e;
}

.rh-add-server-page .rh-flow-heading-image {
    width: 88px;
    height: 88px;
}

.rh-add-server-page .rh-flow-panel-heading h2 {
    margin: 5px 0 8px;
    font-size: clamp(32px, 3.1vw, 43px);
    line-height: 1;
}

.rh-add-server-page .rh-flow-panel-heading p:not(.rh-flow-eyebrow) {
    color: #aab4ba;
    font-size: 15px;
    line-height: 1.6;
}

.rh-add-server-page .rh-flow-panel-heading .rh-flow-eyebrow {
    font-size: 11px !important;
}


/* ---------- CLEAN, BEGINNER-FRIENDLY FORM ---------- */

.rh-add-server-page .rh-flow-form {
    display: grid;
    gap: 22px;
}

.rh-add-server-page .rh-flow-field-grid {
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.rh-add-server-page .rh-flow-field {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.rh-add-server-page .rh-flow-field:focus-within {
    border-color: transparent;
    box-shadow: none;
}

.rh-add-server-page .rh-flow-field > span {
    margin-bottom: 7px;
    color: #eef2f4;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.045em;
}

.rh-add-server-page .rh-flow-field > span::after {
    content: " *";
    color: var(--rh-red-bright);
}

.rh-add-server-page .rh-flow-field > small {
    margin: 0 0 8px;
    color: #75828a;
    font-size: 11px;
    line-height: 1.4;
}

.rh-add-server-page .rh-flow-field input {
    width: 100%;
    min-height: 58px;
    padding: 0 17px;
    box-sizing: border-box;
    border: 1px solid #46545d;
    border-radius: 3px;
    outline: none;
    background: #070c0f;
    color: #ffffff;
    font: 700 16px/1.4 Arial, sans-serif;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.rh-add-server-page .rh-flow-field input:hover {
    border-color: #5b6870;
}

.rh-add-server-page .rh-flow-field input:focus {
    border-color: var(--rh-red-bright);
    background: #090f12;
    box-shadow: 0 0 0 3px rgba(240, 74, 36, 0.10);
}

.rh-add-server-page .rh-flow-field input::placeholder {
    color: #69767e;
    font-weight: 600;
}

.rh-add-server-page .rh-flow-confirm {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 3px 0;
    color: #c0c8cd;
    font-size: 14px;
    line-height: 1.45;
}

.rh-add-server-page .rh-flow-confirm input {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    accent-color: var(--rh-red-bright);
}

.rh-add-server-page .rh-flow-primary {
    min-height: 62px;
    padding: 0 24px;
    border-color: var(--rh-red-bright);
    background:
        linear-gradient(180deg, #bc3319 0%, #7e1f10 100%);
    color: #ffffff;
    font-size: 14px;
    font-weight: 950;
    letter-spacing: 0.045em;
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.11),
        0 12px 28px rgba(0, 0, 0, 0.28),
        0 0 20px rgba(219, 60, 25, 0.08);
}

.rh-add-server-page button.rh-flow-primary::after,
.rh-add-server-page a.rh-flow-primary::after {
    content: "›";
    margin-left: 14px;
    font-size: 28px;
    font-weight: 400;
    line-height: 0;
}

.rh-add-server-page .rh-flow-primary:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #d53b1d 0%, #8d2412 100%);
    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.12),
        0 14px 30px rgba(0, 0, 0, 0.32),
        0 0 26px rgba(219, 60, 25, 0.16);
}


/* ---------- RIGHT-HAND GUIDE ---------- */

.rh-add-server-page .rh-add-guide {
    display: flex;
    flex-direction: column;
}

.rh-add-server-page .rh-add-guide-title {
    display: grid;
    grid-template-columns: 66px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
    margin-bottom: 20px;
}

.rh-add-server-page .rh-add-guide-icon {
    width: 62px;
    height: 62px;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.48));
}

.rh-add-server-page .rh-add-guide-title .rh-flow-eyebrow {
    margin-bottom: 5px;
    font-size: 9px !important;
}

.rh-add-server-page .rh-add-guide-title h3 {
    margin: 0 0 5px;
    font-size: 20px;
    line-height: 1.1;
}

.rh-add-server-page .rh-add-guide-title p:not(.rh-flow-eyebrow) {
    margin: 0;
    color: #8d999f;
    font-size: 12px;
    line-height: 1.5;
}

.rh-add-server-page .rh-add-help-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.rh-add-server-page .rh-add-help-list li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
    padding: 13px 0;
    border-bottom: 1px solid #2a343a;
}

.rh-add-server-page .rh-add-help-list li:last-child {
    border-bottom: 0;
}

.rh-add-server-page .rh-add-help-list > li > span {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--rh-red-bright);
    border-radius: 3px;
    background: rgba(219, 60, 25, 0.06);
    color: #ffffff;
    font-size: 13px;
    font-weight: 950;
}

.rh-add-server-page .rh-add-help-list strong {
    display: block;
    margin: 1px 0 4px;
    color: #f0f3f5;
    font-size: 13px;
    font-weight: 900;
}

.rh-add-server-page .rh-add-help-list p {
    margin: 0;
    color: #88959c;
    font-size: 11px;
    line-height: 1.55;
}

.rh-add-server-page .rh-add-example {
    margin: 18px 0 22px;
    padding: 14px 16px;
    border-color: #3a464e;
    border-left: 3px solid var(--rh-red-bright);
    background: #070c0f;
}

.rh-add-server-page .rh-add-example small {
    font-size: 9px;
}

.rh-add-server-page .rh-add-example strong {
    margin: 5px 0 3px;
    font-size: 14px;
}

.rh-add-server-page .rh-add-next {
    margin-top: 2px;
    padding-top: 22px;
    border-top: 1px solid #354148;
}

.rh-add-server-page .rh-add-next-heading {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    margin-bottom: 13px;
}

.rh-add-server-page .rh-add-next-heading img {
    width: 50px;
    height: 50px;
    object-fit: contain;
    filter: drop-shadow(0 8px 10px rgba(0, 0, 0, 0.48));
}

.rh-add-server-page .rh-add-next-heading .rh-flow-eyebrow {
    margin-bottom: 4px;
    font-size: 9px !important;
}

.rh-add-server-page .rh-add-next-heading h3 {
    margin: 0;
    font-size: 17px;
}

.rh-add-server-page .rh-add-next > ol {
    display: grid;
    gap: 8px;
    margin: 0 0 18px 20px;
    padding: 0;
    color: #a9b3b8;
}

.rh-add-server-page .rh-add-next > ol li {
    padding-left: 4px;
    font-size: 11px;
    line-height: 1.55;
}

.rh-add-server-page .rh-add-rcon-note {
    margin: auto 0 0 !important;
    padding: 13px 14px;
    border-left-color: var(--rh-red-bright);
    background: rgba(105, 31, 16, 0.14);
    color: #9faab0 !important;
    font-size: 11px !important;
    line-height: 1.55;
}

.rh-add-server-page .rh-add-rcon-note strong {
    color: #ffffff;
}


/* ---------- SUBTLE REASSURANCE STRIP ---------- */

.rh-add-server-page .rh-add-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
    border: 1px solid #303a41;
    background: rgba(8, 13, 16, 0.78);
}

.rh-add-server-page .rh-add-trust-strip > div {
    padding: 17px 20px;
    border-right: 1px solid #2d363c;
}

.rh-add-server-page .rh-add-trust-strip > div:last-child {
    border-right: 0;
}

.rh-add-server-page .rh-add-trust-strip strong,
.rh-add-server-page .rh-add-trust-strip span {
    display: block;
}

.rh-add-server-page .rh-add-trust-strip strong {
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.rh-add-server-page .rh-add-trust-strip span {
    color: #7e8a91;
    font-size: 10px;
    line-height: 1.45;
}


/* ---------- OTHER ADD-SERVER STATES ---------- */

.rh-add-server-page .rh-flow-notice {
    margin-bottom: 22px;
}

.rh-add-server-page .rh-flow-current-server {
    min-height: 82px;
    padding: 20px;
}

.rh-add-server-page .rh-flow-mini-steps span {
    padding: 13px 14px;
}


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

@media (max-width: 1180px) {
    .rh-add-server-page .rh-flow-progress {
        gap: 26px;
    }

    .rh-add-server-page .rh-flow-progress > li {
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 12px;
        padding: 16px 18px;
    }

    .rh-add-server-page .rh-flow-step-icon {
        grid-template-columns: 46px 64px;
        width: 118px;
        gap: 8px;
    }

    .rh-add-server-page .rh-flow-step-number {
        width: 44px;
        min-width: 44px;
        height: 44px;
        font-size: 16px;
    }

    .rh-add-server-page .rh-flow-step-icon > img:not(.rh-flow-step-lock) {
        width: 64px;
        height: 64px;
    }

    .rh-add-server-page .rh-flow-workspace {
        grid-template-columns: minmax(0, 1.35fr) minmax(350px, 0.9fr);
    }
}

@media (max-width: 980px) {
    .rh-add-server-page {
        padding: 0 20px 64px;
    }

    .rh-add-server-page .rh-add-hero {
        min-height: 210px;
        padding: 36px 32px;
    }

    .rh-add-server-page .rh-add-hero-copy {
        width: 88%;
    }

    .rh-add-server-page .rh-flow-progress {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .rh-add-server-page .rh-flow-progress > li:not(:last-child)::after {
        display: none;
    }

    .rh-add-server-page .rh-flow-progress > li {
        min-height: 98px;
    }

    .rh-add-server-page .rh-flow-workspace {
        grid-template-columns: 1fr;
    }

    .rh-add-server-page .rh-flow-panel-side {
        height: auto;
    }
}

@media (max-width: 680px) {
    .rh-add-server-page {
        padding: 0 12px 48px;
    }

    .rh-add-server-page .rh-add-hero {
        min-height: 190px;
        margin-bottom: 18px;
        padding: 28px 22px;
        background:
            linear-gradient(
                90deg,
                rgba(5, 8, 10, 0.97),
                rgba(5, 8, 10, 0.80)
            ),
            url('/assets/images/home/scene-forest.webp') center / cover no-repeat;
    }

    .rh-add-server-page .rh-add-hero-copy {
        width: 100%;
    }

    .rh-add-server-page .rh-add-hero h1 {
        font-size: clamp(34px, 10vw, 46px);
    }

    .rh-add-server-page .rh-add-hero p:not(.rh-flow-eyebrow) {
        font-size: 14px;
    }

    .rh-add-server-page .rh-flow-progress > li {
        grid-template-columns: 104px minmax(0, 1fr);
        min-height: 90px;
        padding: 14px 15px;
    }

    .rh-add-server-page .rh-flow-step-icon {
        grid-template-columns: 40px 56px;
        width: 104px;
        gap: 8px;
    }

    .rh-add-server-page .rh-flow-step-number {
        width: 38px;
        min-width: 38px;
        height: 38px;
        font-size: 14px;
    }

    .rh-add-server-page .rh-flow-step-icon > img:not(.rh-flow-step-lock) {
        width: 56px;
        height: 56px;
    }

    .rh-add-server-page .rh-flow-step-copy strong {
        font-size: 14px;
    }

    .rh-add-server-page .rh-flow-step-copy span {
        font-size: 11px;
    }

    .rh-add-server-page .rh-flow-panel-main,
    .rh-add-server-page .rh-flow-panel-side {
        padding: 22px;
    }

    .rh-add-server-page .rh-flow-panel-heading {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 14px;
        padding-bottom: 20px;
    }

    .rh-add-server-page .rh-flow-heading-image {
        width: 62px;
        height: 62px;
    }

    .rh-add-server-page .rh-flow-panel-heading h2 {
        font-size: 29px;
    }

    .rh-add-server-page .rh-flow-field-grid {
        grid-template-columns: 1fr;
    }

    .rh-add-server-page .rh-flow-field input {
        min-height: 54px;
        font-size: 15px;
    }

    .rh-add-server-page .rh-flow-primary {
        min-height: 58px;
        font-size: 12px;
    }

    .rh-add-server-page .rh-add-guide-title {
        grid-template-columns: 54px minmax(0, 1fr);
        gap: 12px;
    }

    .rh-add-server-page .rh-add-guide-icon {
        width: 50px;
        height: 50px;
    }

    .rh-add-server-page .rh-add-trust-strip {
        grid-template-columns: 1fr;
    }

    .rh-add-server-page .rh-add-trust-strip > div {
        border-right: 0;
        border-bottom: 1px solid #2d363c;
    }

    .rh-add-server-page .rh-add-trust-strip > div:last-child {
        border-bottom: 0;
    }
}

/* =========================================================
   V3.1 - READABILITY PASS
   Add Server only.
   Normal/supporting copy should never be tiny on desktop.
   ========================================================= */

.rh-add-server-page .rh-add-hero .rh-flow-eyebrow {
    font-size: 13px !important;
}

.rh-add-server-page .rh-add-hero p:not(.rh-flow-eyebrow) {
    font-size: 18px;
    line-height: 1.65;
}

.rh-add-server-page .rh-flow-step-copy strong {
    font-size: 18px;
}

.rh-add-server-page .rh-flow-step-copy span {
    font-size: 15px;
    line-height: 1.5;
}

.rh-add-server-page .rh-flow-panel-heading .rh-flow-eyebrow,
.rh-add-server-page .rh-add-guide-title .rh-flow-eyebrow,
.rh-add-server-page .rh-add-next-heading .rh-flow-eyebrow {
    font-size: 12px !important;
}

.rh-add-server-page .rh-flow-panel-heading p:not(.rh-flow-eyebrow) {
    font-size: 16px;
    line-height: 1.65;
}

.rh-add-server-page .rh-flow-field > span {
    font-size: 15px;
}

.rh-add-server-page .rh-flow-field > small {
    font-size: 14px;
    line-height: 1.5;
}

.rh-add-server-page .rh-flow-field input {
    font-size: 18px;
}

.rh-add-server-page .rh-flow-confirm {
    font-size: 16px;
    line-height: 1.5;
}

.rh-add-server-page .rh-flow-primary {
    font-size: 15px;
}

.rh-add-server-page .rh-add-guide-title h3 {
    font-size: 22px;
}

.rh-add-server-page .rh-add-guide-title p:not(.rh-flow-eyebrow) {
    font-size: 15px;
    line-height: 1.6;
}

.rh-add-server-page .rh-add-help-list > li > span {
    font-size: 15px;
}

.rh-add-server-page .rh-add-help-list strong {
    font-size: 15px;
}

.rh-add-server-page .rh-add-help-list p {
    font-size: 14px;
    line-height: 1.6;
}

.rh-add-server-page .rh-add-example small {
    font-size: 12px;
}

.rh-add-server-page .rh-add-example strong {
    font-size: 16px;
}

.rh-add-server-page .rh-add-example span {
    font-size: 14px;
}

.rh-add-server-page .rh-add-next-heading h3 {
    font-size: 20px;
}

.rh-add-server-page .rh-add-next > ol li {
    font-size: 14px;
    line-height: 1.65;
}

.rh-add-server-page .rh-add-rcon-note {
    font-size: 14px !important;
    line-height: 1.6;
}

.rh-add-server-page .rh-add-trust-strip strong {
    font-size: 13px;
}

.rh-add-server-page .rh-add-trust-strip span {
    font-size: 13px;
    line-height: 1.5;
}

.rh-add-server-page .rh-flow-notice {
    font-size: 15px;
}

.rh-add-server-page .rh-flow-current-server small {
    font-size: 11px;
}

.rh-add-server-page .rh-flow-current-server strong {
    font-size: 18px;
}

.rh-add-server-page .rh-flow-current-server span {
    font-size: 14px;
}

.rh-add-server-page .rh-flow-mini-steps span {
    font-size: 14px;
}

@media (max-width: 680px) {
    .rh-add-server-page .rh-add-hero p:not(.rh-flow-eyebrow) {
        font-size: 16px;
    }

    .rh-add-server-page .rh-flow-step-copy strong {
        font-size: 16px;
    }

    .rh-add-server-page .rh-flow-step-copy span {
        font-size: 14px;
    }

    .rh-add-server-page .rh-flow-panel-heading p:not(.rh-flow-eyebrow),
    .rh-add-server-page .rh-add-guide-title p:not(.rh-flow-eyebrow) {
        font-size: 15px;
    }

    .rh-add-server-page .rh-flow-field > span {
        font-size: 14px;
    }

    .rh-add-server-page .rh-flow-field > small,
    .rh-add-server-page .rh-add-help-list p,
    .rh-add-server-page .rh-add-next > ol li,
    .rh-add-server-page .rh-add-rcon-note {
        font-size: 13px !important;
    }

    .rh-add-server-page .rh-flow-field input {
        font-size: 17px;
    }

    .rh-add-server-page .rh-flow-confirm {
        font-size: 15px;
    }

    .rh-add-server-page .rh-flow-primary {
        font-size: 14px;
    }
}


/* =========================================================
   ADD SERVER - PREMIUM FIELD ICONS
   server-ip.webp / game-port.webp / query-port.webp

   The artwork IS the square. Do not float a tiny icon inside
   another decorative box. The image fills the full left cell.
   ========================================================= */

.rh-add-server-page .rh-flow-input-shell {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: stretch;
    min-height: 68px;
    border: 1px solid #46545d;
    border-radius: 4px;
    background:
        linear-gradient(180deg, rgba(9, 15, 18, 0.99), rgba(5, 9, 11, 0.99));
    overflow: hidden;
    transition:
        border-color 0.16s ease,
        box-shadow 0.16s ease,
        background 0.16s ease;
}

.rh-add-server-page .rh-flow-input-shell:hover {
    border-color: #5b6870;
}

.rh-add-server-page .rh-flow-input-shell:focus-within {
    border-color: var(--rh-red-bright);
    background: #090f12;
    box-shadow:
        0 0 0 3px rgba(240, 74, 36, 0.10),
        0 0 24px rgba(240, 74, 36, 0.06);
}

.rh-add-server-page .rh-flow-input-icon {
    display: block;
    width: 68px;
    min-width: 68px;
    height: 68px;
    align-self: stretch;
    overflow: hidden;
    border-right: 1px solid #344048;
    background: #090d10;
}

.rh-add-server-page .rh-flow-input-icon img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center;
    filter: none;
}

/* The border now belongs to the combined icon/input shell. */
.rh-add-server-page .rh-flow-input-shell input {
    min-width: 0;
    min-height: 62px;
    padding: 0 20px;
    border: 0;
    border-radius: 0;
    outline: 0;
    background: transparent;
    box-shadow: none;
    color: #ffffff;
    font: 700 17px/1.4 Arial, sans-serif;
}

.rh-add-server-page .rh-flow-input-shell input:hover,
.rh-add-server-page .rh-flow-input-shell input:focus {
    border: 0;
    background: transparent;
    box-shadow: none;
}

.rh-add-server-page .rh-flow-input-shell input::placeholder {
    color: #718089;
    font-weight: 600;
}

@media (max-width: 620px) {
    .rh-add-server-page .rh-flow-input-shell {
        grid-template-columns: 60px minmax(0, 1fr);
        min-height: 60px;
    }

    .rh-add-server-page .rh-flow-input-icon {
        width: 60px;
        min-width: 60px;
        height: 60px;
    }

    .rh-add-server-page .rh-flow-input-icon img {
        width: 100%;
        height: 100%;
    }

    .rh-add-server-page .rh-flow-input-shell input {
        min-height: 58px;
        padding: 0 15px;
        font-size: 16px;
    }
}

/* =========================================================
   ADD SERVER - TRUST STRIP ICONS
   free-listing.webp / public-server-data.webp / no-rcon-password.webp
   Standalone artwork only: no icon tile, no background, no overlay.
   ========================================================= */

.rh-add-server-page .rh-add-trust-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 24px;
    border: 1px solid #303a41;
    background: rgba(8, 13, 16, 0.78);
}

.rh-add-server-page .rh-add-trust-strip > .rh-add-trust-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
    gap: 18px;

    min-height: 96px;
    padding: 18px 22px;

    border-right: 1px solid #2d363c;
}

.rh-add-server-page .rh-add-trust-strip > .rh-add-trust-item:last-child {
    border-right: 0;
}

.rh-add-server-page .rh-add-trust-icon {
    display: block;

    width: 64px;
    height: 64px;

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

    background: transparent;
    border: 0;
    box-shadow: none;

    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45))
        drop-shadow(0 0 10px rgba(240, 74, 36, 0.10));
}

.rh-add-server-page .rh-add-trust-item > div {
    min-width: 0;
}

.rh-add-server-page .rh-add-trust-item strong,
.rh-add-server-page .rh-add-trust-item span {
    display: block;
}

.rh-add-server-page .rh-add-trust-item strong {
    margin-bottom: 5px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;

    text-transform: uppercase;
    letter-spacing: 0.035em;
}

.rh-add-server-page .rh-add-trust-item span {
    color: #98a4ab;

    font-size: 14px;
    line-height: 1.5;
}

@media (max-width: 980px) {

    .rh-add-server-page .rh-add-trust-strip {
        grid-template-columns: 1fr;
    }

    .rh-add-server-page .rh-add-trust-strip > .rh-add-trust-item {
        grid-template-columns: 64px minmax(0, 1fr);

        min-height: 86px;

        border-right: 0;
        border-bottom: 1px solid #2d363c;
    }

    .rh-add-server-page .rh-add-trust-strip > .rh-add-trust-item:last-child {
        border-bottom: 0;
    }

    .rh-add-server-page .rh-add-trust-icon {
        width: 56px;
        height: 56px;
    }
}

@media (max-width: 620px) {

    .rh-add-server-page .rh-add-trust-strip > .rh-add-trust-item {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 14px;

        padding: 16px 18px;
    }

    .rh-add-server-page .rh-add-trust-icon {
        width: 50px;
        height: 50px;
    }

    .rh-add-server-page .rh-add-trust-item strong {
        font-size: 14px;
    }

    .rh-add-server-page .rh-add-trust-item span {
        font-size: 13px;
    }
}

/* =========================================================
   V4 - PREMIUM VERIFY SERVER PAGE
   Locked visual direction: 2026-09-15
   Scoped to verify-server.php only.
   ========================================================= */

.rh-verify-page {
    width: 100%;
    max-width: none;

    min-height: calc(100vh - 82px);

    padding: 0 28px 84px;

    overflow: hidden;

    background:
        radial-gradient(circle at 50% -8%, rgba(219, 60, 25, 0.09), transparent 34%),
        linear-gradient(180deg, #070a0c 0%, #090d10 48%, #070a0c 100%);
}

.rh-verify-page::before {
    background:
        repeating-linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.010) 0 1px,
            transparent 1px 6px
        );

    opacity: 0.7;
}

.rh-verify-page .rh-flow-shell {
    width: min(1480px, 100%);
    max-width: 1480px;
}


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

.rh-verify-page .rh-verify-hero {
    position: relative;

    min-height: 230px;

    margin: 0 0 28px;
    padding: 42px 46px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 36px;

    overflow: hidden;

    border-left: 1px solid rgba(78, 91, 99, 0.62);
    border-right: 1px solid rgba(78, 91, 99, 0.62);
    border-bottom: 1px solid #313b42;

    background:
        linear-gradient(
            90deg,
            rgba(5, 8, 10, 0.98) 0%,
            rgba(5, 8, 10, 0.90) 39%,
            rgba(5, 8, 10, 0.45) 68%,
            rgba(5, 8, 10, 0.20) 100%
        ),
        url('/assets/images/home/scene-forest.webp') center 48% / cover no-repeat;

    box-shadow:
        inset 0 -1px rgba(255, 255, 255, 0.025),
        0 22px 55px rgba(0, 0, 0, 0.30);
}

.rh-verify-page .rh-verify-hero::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(circle at 77% 42%, rgba(240, 74, 36, 0.13), transparent 26%),
        linear-gradient(180deg, transparent 65%, rgba(0, 0, 0, 0.42));
}

.rh-verify-page .rh-verify-hero-copy,
.rh-verify-page .rh-verify-server-card {
    position: relative;
    z-index: 1;
}

.rh-verify-page .rh-verify-hero-copy {
    width: min(850px, 75%);
}

.rh-verify-page .rh-verify-hero .rh-flow-eyebrow {
    margin-bottom: 12px;

    font-size: 13px !important;
    letter-spacing: 0.19em;
}

.rh-verify-page .rh-verify-hero h1 {
    margin: 0 0 12px;

    white-space: normal;

    color: #ffffff;

    font-size: clamp(42px, 4.3vw, 64px);
    font-weight: 950;
    line-height: 0.98;

    text-transform: uppercase;
    letter-spacing: 0.005em;
}

.rh-verify-page .rh-verify-hero h1 span {
    color: var(--rh-red-bright);

    text-shadow:
        0 0 24px rgba(240, 74, 36, 0.12);
}

.rh-verify-page .rh-verify-hero p:not(.rh-flow-eyebrow) {
    max-width: 760px;

    margin: 0;

    color: #c1c9ce;

    font-size: 18px;
    line-height: 1.65;
}

.rh-verify-page .rh-verify-server-card {
    flex: 0 0 300px;

    padding: 18px 20px;

    box-sizing: border-box;

    border: 1px solid #46545d;
    border-radius: 4px;

    background: rgba(6, 11, 14, 0.88);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.03);

    text-align: right;
}

.rh-verify-page .rh-verify-server-card small,
.rh-verify-page .rh-verify-server-card strong,
.rh-verify-page .rh-verify-server-card span {
    display: block;
}

.rh-verify-page .rh-verify-server-card small {
    margin-bottom: 5px;

    color: #8a969d;

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

    text-transform: uppercase;
    letter-spacing: 0.09em;
}

.rh-verify-page .rh-verify-server-card strong {
    color: #ffffff;

    font-size: 17px;
    font-weight: 900;
}

.rh-verify-page .rh-verify-server-card span {
    margin-top: 5px;

    color: #96a2a9;

    font-size: 14px;
}


/* ---------- LARGE 3-STEP FLOW ---------- */

.rh-verify-page .rh-flow-progress {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 38px;

    margin: 0 0 28px;
}

.rh-verify-page .rh-flow-progress > li {
    position: relative;

    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    gap: 18px;

    min-height: 112px;

    padding: 18px 24px;

    border: 1px solid #344149;
    border-radius: 4px;

    background:
        radial-gradient(circle at 20% 50%, rgba(48, 84, 106, 0.09), transparent 34%),
        linear-gradient(180deg, rgba(15, 22, 26, 0.99), rgba(8, 13, 16, 0.99));

    box-shadow:
        0 18px 38px rgba(0, 0, 0, 0.28),
        inset 0 1px rgba(255, 255, 255, 0.025);

    opacity: 1;
}

.rh-verify-page .rh-flow-progress > li::before {
    width: 3px;

    background: #3a464e;
}

.rh-verify-page .rh-flow-progress > li:not(:last-child)::after {
    content: "›";

    position: absolute;
    z-index: 4;

    right: -28px;
    top: 50%;

    transform: translateY(-52%);

    color: #e2e7ea;

    font-size: 38px;
    font-weight: 300;
    line-height: 1;
}

.rh-verify-page .rh-flow-progress > li.is-active {
    border-color: var(--rh-red-bright);

    background:
        radial-gradient(circle at 18% 50%, rgba(240, 74, 36, 0.18), transparent 36%),
        linear-gradient(180deg, rgba(41, 20, 15, 0.99), rgba(18, 12, 11, 0.99));

    box-shadow:
        0 0 0 1px rgba(240, 74, 36, 0.12),
        0 0 28px rgba(219, 60, 25, 0.12),
        0 20px 42px rgba(0, 0, 0, 0.32);
}

.rh-verify-page .rh-flow-progress > li.is-done {
    border-color: rgba(53, 210, 138, 0.42);

    background:
        radial-gradient(circle at 18% 50%, rgba(53, 210, 138, 0.09), transparent 36%),
        linear-gradient(180deg, rgba(12, 24, 21, 0.99), rgba(8, 14, 13, 0.99));
}

.rh-verify-page .rh-flow-progress > li.is-done::before {
    background: var(--rh-green);
}

.rh-verify-page .rh-flow-progress > li.is-locked {
    opacity: 0.72;
}

.rh-verify-page .rh-flow-step-lock {
    display: none;
}

.rh-verify-page .rh-flow-step-icon {
    position: relative;

    display: grid;
    grid-template-columns: 52px 72px;
    align-items: center;

    gap: 12px;

    width: 136px;
    height: auto;
}

.rh-verify-page .rh-flow-step-number {
    position: relative;

    display: grid;
    place-items: center;

    width: 48px;
    min-width: 48px;
    height: 48px;

    padding: 0;

    border: 1px solid #5c6971;
    border-radius: 50%;

    background: rgba(6, 10, 12, 0.88);

    color: #d5dce0;

    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0;
}

.rh-verify-page .rh-flow-progress > li.is-active .rh-flow-step-number {
    border-color: var(--rh-red-bright);

    background: rgba(24, 11, 8, 0.88);

    color: #ffffff;

    box-shadow:
        0 0 18px rgba(240, 74, 36, 0.16);
}

.rh-verify-page .rh-flow-progress > li.is-done .rh-flow-step-number {
    border-color: rgba(53, 210, 138, 0.72);

    color: #d8f8e8;
}

.rh-verify-page .rh-flow-progress > li.is-done .rh-flow-step-number::after {
    content: "✓";

    position: absolute;

    right: -8px;
    bottom: -7px;

    display: grid;
    place-items: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: var(--rh-green);

    color: #07110c;

    font-size: 13px;
    font-weight: 950;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.42);
}

.rh-verify-page .rh-flow-step-icon > img:not(.rh-flow-step-lock) {
    width: 72px;
    height: 72px;

    object-fit: contain;

    filter:
        drop-shadow(0 9px 12px rgba(0, 0, 0, 0.55))
        drop-shadow(0 0 10px rgba(41, 142, 235, 0.12));
}

.rh-verify-page .rh-flow-step-copy small {
    display: none;
}

.rh-verify-page .rh-flow-step-copy strong {
    color: #ffffff;

    font-size: 18px;
    font-weight: 950;
    line-height: 1.18;

    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.rh-verify-page .rh-flow-step-copy span {
    margin-top: 7px;

    color: #a2adb3;

    font-size: 15px;
    line-height: 1.5;
}


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

.rh-verify-page .rh-flow-workspace {
    grid-template-columns: minmax(0, 1.48fr) minmax(400px, 0.95fr);

    gap: 24px;

    align-items: stretch;
}

.rh-verify-page .rh-flow-workspace-single {
    grid-template-columns: minmax(0, 1fr);
}

.rh-verify-page .rh-flow-panel {
    border: 1px solid #35424a;
    border-radius: 4px;

    background:
        radial-gradient(circle at 0 0, rgba(36, 90, 119, 0.055), transparent 32%),
        linear-gradient(180deg, rgba(13, 20, 24, 0.995), rgba(8, 13, 16, 0.995));

    box-shadow:
        0 24px 54px rgba(0, 0, 0, 0.34),
        inset 0 1px rgba(255, 255, 255, 0.025);
}

.rh-verify-page .rh-flow-panel-main {
    padding: 34px 38px 38px;
}

.rh-verify-page .rh-flow-panel-side {
    position: static;

    height: 100%;

    padding: 32px;

    box-sizing: border-box;
}

.rh-verify-page .rh-flow-panel-heading {
    grid-template-columns: 92px minmax(0, 1fr);

    gap: 22px;

    margin-bottom: 28px;
    padding-bottom: 24px;

    border-bottom: 1px solid #2d383e;
}

.rh-verify-page .rh-flow-heading-image {
    width: 88px;
    height: 88px;
}

.rh-verify-page .rh-flow-panel-heading h2 {
    margin: 5px 0 8px;

    font-size: clamp(31px, 3vw, 42px);
    line-height: 1;
}

.rh-verify-page .rh-flow-panel-heading p:not(.rh-flow-eyebrow) {
    color: #aab4ba;

    font-size: 16px;
    line-height: 1.65;
}


/* ---------- CHOOSE HOW TO CONTINUE ---------- */

.rh-verify-page .rh-verify-choice-panel {
    min-height: 560px;
}

.rh-verify-page .rh-verify-section-heading {
    margin-bottom: 26px;
    padding-bottom: 24px;

    border-bottom: 1px solid #2d383e;
}

.rh-verify-page .rh-verify-section-heading .rh-flow-eyebrow {
    margin-bottom: 8px;

    font-size: 12px !important;
}

.rh-verify-page .rh-verify-section-heading h2 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: clamp(31px, 3vw, 42px);
    font-weight: 950;
    line-height: 1.02;

    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.rh-verify-page .rh-verify-section-heading p {
    max-width: 820px;

    margin: 0;

    color: #aab4ba;

    font-size: 16px;
    line-height: 1.65;
}

.rh-verify-page .rh-verify-section-heading p strong {
    color: #ffffff;
}

.rh-verify-page .rh-verify-choice-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
    align-items: stretch;

    gap: 18px;
}

.rh-verify-page .rh-verify-choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;

    min-height: 330px;

    padding: 28px;

    box-sizing: border-box;

    border: 1px solid #3a4850;
    border-radius: 4px;

    background:
        radial-gradient(circle at 50% 0%, rgba(41, 101, 132, 0.08), transparent 38%),
        linear-gradient(180deg, #10181c, #090e11);

    text-align: center;

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.24),
        inset 0 1px rgba(255, 255, 255, 0.025);
}

.rh-verify-page .rh-verify-choice-card.is-primary {
    border-color: var(--rh-red-bright);

    background:
        radial-gradient(circle at 50% 0%, rgba(240, 74, 36, 0.15), transparent 40%),
        linear-gradient(180deg, #1e1310, #0d0d0d);

    box-shadow:
        0 0 0 1px rgba(240, 74, 36, 0.10),
        0 0 30px rgba(219, 60, 25, 0.10),
        0 18px 36px rgba(0, 0, 0, 0.26);
}

.rh-verify-page .rh-verify-choice-icon {
    display: grid;
    place-items: center;

    width: 82px;
    height: 82px;

    margin-bottom: 22px;

    color: var(--rh-red-bright);

    filter:
        drop-shadow(0 10px 12px rgba(0, 0, 0, 0.44))
        drop-shadow(0 0 12px rgba(240, 74, 36, 0.14));
}

.rh-verify-page .rh-verify-choice-icon-ready {
    color: #dce5e9;
}

.rh-verify-page .rh-verify-choice-icon svg {
    width: 100%;
    height: 100%;

    fill: currentColor;
}

.rh-verify-page .rh-verify-choice-icon img {
    display: block;

    width: 100%;
    height: 100%;

    max-width: none;

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

    background: transparent;
    border: 0;
    box-shadow: none;
}

.rh-verify-page .rh-verify-choice-icon-ready img {
    filter:
        drop-shadow(0 10px 12px rgba(0, 0, 0, 0.44))
        drop-shadow(0 0 12px rgba(53, 210, 138, 0.14));
}

.rh-verify-page .rh-verify-choice-card h3 {
    margin: 0 0 10px;

    color: #ffffff;

    font-size: 21px;
    font-weight: 950;
    line-height: 1.15;

    text-transform: uppercase;
}

.rh-verify-page .rh-verify-choice-card p {
    max-width: 370px;

    margin: 0 0 26px;

    color: #a5b0b6;

    font-size: 15px;
    line-height: 1.6;
}

.rh-verify-page .rh-verify-choice-card p strong {
    color: #ffffff;
}

.rh-verify-page .rh-verify-choice-button {
    width: 100%;
    min-height: 58px;

    margin-top: auto;
    padding: 0 18px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    border: 1px solid #50616b;
    border-radius: 3px;

    background:
        linear-gradient(180deg, #18242a, #0c1418);

    color: #ffffff;

    font: 950 14px/1 Arial, sans-serif;

    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.045em;

    cursor: pointer;

    transition:
        transform 0.16s ease,
        border-color 0.16s ease,
        background 0.16s ease,
        box-shadow 0.16s ease;
}

.rh-verify-page .rh-verify-choice-button:hover {
    transform: translateY(-1px);

    border-color: #71838d;

    background:
        linear-gradient(180deg, #223139, #101a1f);
}

.rh-verify-page .rh-verify-choice-button-primary {
    border-color: var(--rh-red-bright);

    background:
        linear-gradient(180deg, #d33b1d, #8d2412);

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.12),
        0 0 20px rgba(219, 60, 25, 0.09);
}

.rh-verify-page .rh-verify-choice-button-primary:hover {
    border-color: #ff5c35;

    background:
        linear-gradient(180deg, #e84624, #9c2915);

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.14),
        0 0 26px rgba(219, 60, 25, 0.16);
}

.rh-verify-page .rh-verify-choice-or {
    position: relative;

    display: grid;
    place-items: center;
}

.rh-verify-page .rh-verify-choice-or::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 50%;

    width: 1px;

    background: #303b42;
}

.rh-verify-page .rh-verify-choice-or span {
    position: relative;
    z-index: 1;

    padding: 8px 6px;

    background: #0c1215;

    color: #c5ced3;

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


/* ---------- INSTALL PANEL ---------- */

.rh-verify-page .rh-verify-install-panel {
    padding: 26px;

    border: 1px solid #3a4850;
    border-radius: 4px;

    background:
        radial-gradient(circle at 0 0, rgba(240, 74, 36, 0.08), transparent 35%),
        linear-gradient(180deg, #10171b, #090e11);
}

.rh-verify-page .rh-verify-install-panel[hidden] {
    display: none !important;
}

.rh-verify-page .rh-verify-install-heading {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);

    gap: 16px;

    margin-bottom: 22px;
}

.rh-verify-page .rh-verify-install-number {
    display: grid;
    place-items: center;

    width: 48px;
    height: 48px;

    border: 1px solid var(--rh-red-bright);
    border-radius: 4px;

    background:
        linear-gradient(180deg, #d84421, #8e2513);

    color: #ffffff;

    font-size: 16px;
    font-weight: 950;
}

.rh-verify-page .rh-verify-install-heading .rh-flow-eyebrow {
    margin-bottom: 6px;

    font-size: 11px !important;
}

.rh-verify-page .rh-verify-install-heading h3 {
    margin: 0 0 7px;

    color: #ffffff;

    font-size: 24px;
    font-weight: 950;

    text-transform: uppercase;
}

.rh-verify-page .rh-verify-install-heading p {
    margin: 0;

    color: #a4b0b6;

    font-size: 15px;
    line-height: 1.65;
}


/* ---------- REASSURANCE STRIP ---------- */

.rh-verify-page .rh-verify-reassurance-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    margin-top: 24px;

    border: 1px solid #303a41;

    background: rgba(7, 12, 15, 0.78);
}

.rh-verify-page .rh-verify-reassurance-strip > div {
    padding: 16px 18px;

    border-right: 1px solid #2d363c;
}

.rh-verify-page .rh-verify-reassurance-strip > div:last-child {
    border-right: 0;
}

.rh-verify-page .rh-verify-reassurance-strip strong,
.rh-verify-page .rh-verify-reassurance-strip span {
    display: block;
}

.rh-verify-page .rh-verify-reassurance-strip strong {
    margin-bottom: 4px;

    color: #ffffff;

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

.rh-verify-page .rh-verify-reassurance-strip span {
    color: #8d999f;

    font-size: 13px;
    line-height: 1.45;
}


/* ---------- RIGHT-SIDE OWNERSHIP EXPLANATION ---------- */

.rh-verify-page .rh-verify-info-panel {
    display: flex;
    flex-direction: column;
}

.rh-verify-page .rh-verify-info-heading {
    margin-bottom: 14px;
}

.rh-verify-page .rh-verify-info-heading .rh-flow-eyebrow {
    margin-bottom: 8px;

    font-size: 12px !important;
}

.rh-verify-page .rh-verify-info-heading h3 {
    margin: 0;

    color: #ffffff;

    font-size: 25px;
    font-weight: 950;
    line-height: 1.1;

    text-transform: uppercase;
}

.rh-verify-page .rh-verify-info-lead {
    margin: 0 0 22px;

    color: #a7b1b7;

    font-size: 16px;
    line-height: 1.65;
}

.rh-verify-page .rh-verify-info-list {
    display: grid;

    gap: 12px;
}

.rh-verify-page .rh-verify-info-list > div {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    align-items: center;

    gap: 14px;

    padding: 14px 15px;

    border: 1px solid #35424a;
    border-radius: 3px;

    background: rgba(7, 12, 15, 0.74);
}

.rh-verify-page .rh-verify-info-icon {
    display: grid;
    place-items: center;

    width: 58px;
    height: 58px;

    border: 0;
    border-radius: 0;

    background: transparent;
}

.rh-verify-page .rh-verify-info-icon img {
    display: block;

    width: 54px;
    height: 54px;

    max-width: none;

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

    background: transparent;
    border: 0;
    box-shadow: none;

    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 10px rgba(240, 74, 36, 0.10));
}

.rh-verify-page .rh-verify-info-list strong,
.rh-verify-page .rh-verify-info-list span {
    display: block;
}

.rh-verify-page .rh-verify-info-list strong {
    margin-bottom: 4px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 900;
}

.rh-verify-page .rh-verify-info-list span {
    color: #8f9ba2;

    font-size: 14px;
    line-height: 1.5;
}

.rh-verify-page .rh-verify-help-callout {
    margin-top: auto;
    padding: 18px;

    border: 1px solid #673526;
    border-radius: 3px;

    background:
        radial-gradient(circle at 100% 50%, rgba(240, 74, 36, 0.08), transparent 44%),
        rgba(77, 27, 17, 0.12);
}

.rh-verify-page .rh-verify-help-callout .rh-flow-eyebrow {
    margin-bottom: 7px;

    font-size: 11px !important;
}

.rh-verify-page .rh-verify-help-callout strong,
.rh-verify-page .rh-verify-help-callout span {
    display: block;
}

.rh-verify-page .rh-verify-help-callout strong {
    margin-bottom: 7px;

    color: #ffffff;

    font-size: 15px;
}

.rh-verify-page .rh-verify-help-callout span {
    color: #9da9af;

    font-size: 13px;
    line-height: 1.65;
}

.rh-verify-page .rh-verify-help-callout code {
    color: #dbe2e6;

    font-size: 12px;
}


/* ---------- EXISTING LATER VERIFICATION SCREENS ---------- */

.rh-verify-page .rh-flow-primary {
    min-height: 60px;

    border-color: var(--rh-red-bright);

    background:
        linear-gradient(180deg, #bc3319 0%, #7e1f10 100%);

    color: #ffffff;

    font-size: 15px;
    font-weight: 950;

    box-shadow:
        inset 0 1px rgba(255, 255, 255, 0.11),
        0 12px 28px rgba(0, 0, 0, 0.28),
        0 0 20px rgba(219, 60, 25, 0.08);
}

.rh-verify-page .rh-flow-primary:hover {
    background:
        linear-gradient(180deg, #d53b1d 0%, #8d2412 100%);
}

.rh-verify-page .rh-flow-command-explain strong {
    font-size: 15px;
}

.rh-verify-page .rh-flow-command-explain p {
    font-size: 14px;
    line-height: 1.6;
}

.rh-verify-page .rh-smart-plugin-paths code {
    font-size: 14px;
}

.rh-verify-page .rh-smart-install-help strong,
.rh-verify-page .rh-smart-install-help span {
    font-size: 14px;
    line-height: 1.55;
}

.rh-verify-page .rh-smart-step-links a,
.rh-verify-page .rh-smart-step-links button,
.rh-verify-page .rh-flow-text-button {
    font-size: 13px;
}

.rh-verify-page .rh-flow-mini-steps span {
    font-size: 14px;
}

.rh-verify-page .rh-flow-side-note {
    font-size: 14px !important;
    line-height: 1.6;
}

.rh-verify-page .rh-flow-console-steps p {
    font-size: 14px;
    line-height: 1.55;
}

.rh-verify-page .rh-flow-command-card > div:first-child small {
    font-size: 11px;
}

.rh-verify-page .rh-flow-command-card > div:first-child strong {
    font-size: 17px;
}

.rh-verify-page .rh-private-command-wrap textarea,
.rh-verify-page .rh-command-row input {
    font-size: 15px;
}

.rh-verify-page .rh-copy-button {
    font-size: 12px;
}

.rh-verify-page .rh-copy-status,
.rh-verify-page .rh-expiry {
    font-size: 13px;
}

.rh-verify-page .rh-direct-verify-wait strong {
    font-size: 16px;
}

.rh-verify-page .rh-direct-verify-wait p {
    font-size: 14px;
}


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

@media (max-width: 1180px) {

    .rh-verify-page .rh-flow-progress {
        gap: 26px;
    }

    .rh-verify-page .rh-flow-progress > li {
        grid-template-columns: 118px minmax(0, 1fr);

        gap: 12px;

        padding: 16px 18px;
    }

    .rh-verify-page .rh-flow-step-icon {
        grid-template-columns: 46px 64px;

        width: 118px;

        gap: 8px;
    }

    .rh-verify-page .rh-flow-step-number {
        width: 44px;
        min-width: 44px;
        height: 44px;

        font-size: 16px;
    }

    .rh-verify-page .rh-flow-step-icon > img:not(.rh-flow-step-lock) {
        width: 64px;
        height: 64px;
    }

    .rh-verify-page .rh-flow-workspace {
        grid-template-columns: minmax(0, 1.35fr) minmax(350px, 0.9fr);
    }
}

@media (max-width: 980px) {

    .rh-verify-page {
        padding: 0 20px 64px;
    }

    .rh-verify-page .rh-verify-hero {
        min-height: 210px;

        padding: 34px 32px;
    }

    .rh-verify-page .rh-verify-hero-copy {
        width: 100%;
    }

    .rh-verify-page .rh-verify-server-card {
        flex-basis: 260px;
    }

    .rh-verify-page .rh-flow-progress {
        grid-template-columns: 1fr;

        gap: 12px;
    }

    .rh-verify-page .rh-flow-progress > li:not(:last-child)::after {
        display: none;
    }

    .rh-verify-page .rh-flow-workspace {
        grid-template-columns: 1fr;
    }

    .rh-verify-page .rh-flow-panel-side {
        height: auto;
    }

    .rh-verify-page .rh-verify-help-callout {
        margin-top: 24px;
    }
}

@media (max-width: 760px) {

    .rh-verify-page .rh-verify-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .rh-verify-page .rh-verify-server-card {
        width: 100%;
        flex-basis: auto;

        text-align: left;
    }

    .rh-verify-page .rh-verify-choice-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .rh-verify-page .rh-verify-choice-or {
        min-height: 34px;
    }

    .rh-verify-page .rh-verify-choice-or::before {
        top: 50%;
        bottom: auto;
        left: 0;

        width: 100%;
        height: 1px;
    }

    .rh-verify-page .rh-verify-choice-or span {
        padding: 6px 12px;
    }

    .rh-verify-page .rh-verify-reassurance-strip {
        grid-template-columns: 1fr;
    }

    .rh-verify-page .rh-verify-reassurance-strip > div {
        border-right: 0;
        border-bottom: 1px solid #2d363c;
    }

    .rh-verify-page .rh-verify-reassurance-strip > div:last-child {
        border-bottom: 0;
    }
}

@media (max-width: 620px) {

    .rh-verify-page {
        padding: 0 12px 48px;
    }

    .rh-verify-page .rh-verify-hero {
        min-height: 190px;

        margin-bottom: 18px;
        padding: 28px 22px;
    }

    .rh-verify-page .rh-verify-hero h1 {
        font-size: clamp(34px, 10vw, 46px);
    }

    .rh-verify-page .rh-verify-hero p:not(.rh-flow-eyebrow) {
        font-size: 16px;
    }

    .rh-verify-page .rh-flow-progress > li {
        grid-template-columns: 104px minmax(0, 1fr);

        min-height: 90px;

        padding: 14px 15px;
    }

    .rh-verify-page .rh-flow-step-icon {
        grid-template-columns: 40px 56px;

        width: 104px;

        gap: 8px;
    }

    .rh-verify-page .rh-flow-step-number {
        width: 38px;
        min-width: 38px;
        height: 38px;

        font-size: 14px;
    }

    .rh-verify-page .rh-flow-step-icon > img:not(.rh-flow-step-lock) {
        width: 56px;
        height: 56px;
    }

    .rh-verify-page .rh-flow-step-copy strong {
        font-size: 16px;
    }

    .rh-verify-page .rh-flow-step-copy span {
        font-size: 14px;
    }

    .rh-verify-page .rh-flow-panel-main,
    .rh-verify-page .rh-flow-panel-side {
        padding: 22px;
    }

    .rh-verify-page .rh-verify-section-heading h2,
    .rh-verify-page .rh-flow-panel-heading h2 {
        font-size: 29px;
    }

    .rh-verify-page .rh-verify-section-heading p,
    .rh-verify-page .rh-flow-panel-heading p:not(.rh-flow-eyebrow),
    .rh-verify-page .rh-verify-info-lead {
        font-size: 15px;
    }

    .rh-verify-page .rh-verify-choice-card {
        min-height: 300px;

        padding: 22px;
    }

    .rh-verify-page .rh-verify-choice-card h3 {
        font-size: 19px;
    }

    .rh-verify-page .rh-verify-choice-card p {
        font-size: 14px;
    }

    .rh-verify-page .rh-verify-choice-icon {
        width: 72px;
        height: 72px;
    }

    .rh-verify-page .rh-verify-choice-button {
        font-size: 13px;
    }

    .rh-verify-page .rh-verify-install-panel {
        padding: 20px;
    }

    .rh-verify-page .rh-verify-info-heading h3 {
        font-size: 22px;
    }
}



@media (max-width: 620px) {

    .rh-verify-page .rh-verify-info-list > div {
        grid-template-columns: 56px minmax(0, 1fr);
    }

    .rh-verify-page .rh-verify-info-icon {
        width: 50px;
        height: 50px;
    }

    .rh-verify-page .rh-verify-info-icon img {
        width: 48px;
        height: 48px;
    }
}

/* =========================================================
   VERIFY SERVER - REASSURANCE STRIP ICONS
   carbon-oxide.webp / verification-only.webp /
   verify-no-rcon-required.webp
   ========================================================= */

.rh-verify-page .rh-verify-reassurance-strip > .rh-verify-reassurance-item {
    display: grid;
    grid-template-columns: 68px minmax(0, 1fr);
    align-items: center;
    gap: 15px;

    min-height: 92px;
    padding: 16px 18px;

    box-sizing: border-box;
}

.rh-verify-page .rh-verify-reassurance-icon {
    display: block;

    width: 60px;
    height: 60px;

    max-width: none;

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

    background: transparent;
    border: 0;
    box-shadow: none;

    filter:
        drop-shadow(0 8px 12px rgba(0, 0, 0, 0.42))
        drop-shadow(0 0 10px rgba(240, 74, 36, 0.08));
}

.rh-verify-page .rh-verify-reassurance-item > div {
    min-width: 0;
}

.rh-verify-page .rh-verify-reassurance-item strong,
.rh-verify-page .rh-verify-reassurance-item span {
    display: block;
}

@media (max-width: 760px) {

    .rh-verify-page .rh-verify-reassurance-strip > .rh-verify-reassurance-item {
        grid-template-columns: 62px minmax(0, 1fr);

        min-height: 84px;

        border-right: 0;
        border-bottom: 1px solid #2d363c;
    }

    .rh-verify-page .rh-verify-reassurance-strip > .rh-verify-reassurance-item:last-child {
        border-bottom: 0;
    }

    .rh-verify-page .rh-verify-reassurance-icon {
        width: 54px;
        height: 54px;
    }
}

@media (max-width: 620px) {

    .rh-verify-page .rh-verify-reassurance-strip > .rh-verify-reassurance-item {
        grid-template-columns: 56px minmax(0, 1fr);
        gap: 13px;

        padding: 15px 16px;
    }

    .rh-verify-page .rh-verify-reassurance-icon {
        width: 48px;
        height: 48px;
    }
}

/* =========================================================
   V4.1 - PREMIUM FINAL VERIFICATION COMMAND SCREEN
   Keeps the final command stage visually consistent with the
   premium Add Server and Verify Server pages.
   ========================================================= */

.rh-verify-page .rh-verify-command-workspace {
    grid-template-columns: minmax(0, 1.48fr) minmax(400px, 0.95fr);
    gap: 24px;
    align-items: stretch;
}

.rh-verify-page .rh-verify-run-panel,
.rh-verify-page .rh-verify-send-panel {
    min-height: 610px;
}

.rh-verify-page .rh-verify-run-heading {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    align-items: center;
    gap: 22px;

    margin-bottom: 26px;
    padding-bottom: 24px;

    border-bottom: 1px solid #2d383e;
}

.rh-verify-page .rh-verify-run-heading-icon {
    display: block;
    width: 86px;
    height: 86px;

    object-fit: contain;

    filter:
        drop-shadow(0 10px 14px rgba(0, 0, 0, 0.52))
        drop-shadow(0 0 12px rgba(46, 162, 255, 0.10));
}

.rh-verify-page .rh-verify-run-heading .rh-flow-eyebrow {
    margin-bottom: 7px;
    font-size: 12px !important;
}

.rh-verify-page .rh-verify-run-heading h2 {
    margin: 0 0 9px;

    color: #ffffff;

    font-size: clamp(31px, 3vw, 42px);
    font-weight: 950;
    line-height: 1.02;

    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.rh-verify-page .rh-verify-run-heading p:not(.rh-flow-eyebrow) {
    max-width: 780px;
    margin: 0;

    color: #aab4ba;

    font-size: 16px;
    line-height: 1.65;
}

.rh-verify-page .rh-verify-run-steps {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;

    margin-bottom: 22px;
}

.rh-verify-page .rh-verify-run-steps > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: start;
    gap: 12px;

    min-height: 88px;
    padding: 15px;

    box-sizing: border-box;

    border: 1px solid #35424a;
    border-radius: 3px;

    background:
        linear-gradient(180deg, rgba(11, 18, 22, 0.98), rgba(7, 12, 15, 0.98));
}

.rh-verify-page .rh-verify-run-steps > div > span {
    display: grid;
    place-items: center;

    width: 38px;
    height: 38px;

    border: 1px solid var(--rh-red-bright);
    border-radius: 3px;

    background: rgba(219, 60, 25, 0.07);

    color: #ffffff;

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

.rh-verify-page .rh-verify-run-steps strong,
.rh-verify-page .rh-verify-run-steps p {
    display: block;
}

.rh-verify-page .rh-verify-run-steps strong {
    margin: 1px 0 5px;

    color: #ffffff;

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

.rh-verify-page .rh-verify-run-steps p {
    margin: 0;

    color: #8f9ba2;

    font-size: 13px;
    line-height: 1.5;
}

.rh-verify-page .rh-verify-command-box {
    margin-bottom: 18px;
    padding: 22px;

    border: 1px solid rgba(240, 74, 36, 0.48);
    border-left: 3px solid var(--rh-red-bright);
    border-radius: 4px;

    background:
        radial-gradient(circle at 0 0, rgba(240, 74, 36, 0.10), transparent 34%),
        linear-gradient(180deg, rgba(14, 18, 20, 0.995), rgba(7, 11, 13, 0.995));

    box-shadow:
        0 18px 36px rgba(0, 0, 0, 0.24),
        inset 0 1px rgba(255, 255, 255, 0.025);
}

.rh-verify-page .rh-verify-command-title {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 15px;
}

.rh-verify-page .rh-verify-command-title .rh-flow-eyebrow {
    margin-bottom: 6px;
    font-size: 11px !important;
}

.rh-verify-page .rh-verify-command-title h3 {
    margin: 0;

    color: #ffffff;

    font-size: 19px;
    font-weight: 950;

    text-transform: uppercase;
}

.rh-verify-page .rh-verify-command-private {
    flex-shrink: 0;

    padding: 7px 10px;

    border: 1px solid #4c5961;
    border-radius: 3px;

    background: rgba(255, 255, 255, 0.02);

    color: #9da8ae;

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

    text-transform: uppercase;
    letter-spacing: 0.045em;
}

.rh-verify-page .rh-verify-command-input {
    border-color: #47545c;
    background: #05090b;
}

.rh-verify-page .rh-verify-command-input textarea {
    min-height: 72px;
    padding: 18px;

    color: #ffffff;

    font: 800 15px/1.5 Consolas, monospace;
}

.rh-verify-page .rh-verify-copy-button {
    min-width: 135px;
    padding: 0 18px;

    background:
        linear-gradient(180deg, #252f34, #151c20);

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

    text-transform: uppercase;
}

.rh-verify-page .rh-verify-copy-button:hover {
    background:
        linear-gradient(180deg, #343f45, #1d262b);
}

.rh-verify-page .rh-verify-command-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-top: 10px;
}

.rh-verify-page .rh-verify-command-meta .rh-copy-status,
.rh-verify-page .rh-verify-command-meta .rh-expiry {
    min-height: 0;
    margin: 0;

    color: #8b979e;

    font-size: 13px;
}

.rh-verify-page .rh-verify-watch-card {
    grid-template-columns: 34px minmax(0, 1fr) auto;
    gap: 16px;

    margin: 0 0 18px;
    padding: 18px;

    border-color: #3c4951;

    background:
        radial-gradient(circle at 0 50%, rgba(46, 162, 255, 0.06), transparent 28%),
        linear-gradient(180deg, rgba(12, 19, 23, 0.99), rgba(7, 12, 15, 0.99));
}

.rh-verify-page .rh-verify-watch-card small {
    margin-bottom: 4px;

    color: #7f8d95;

    font-size: 11px;
}

.rh-verify-page .rh-verify-watch-card strong {
    font-size: 17px;
}

.rh-verify-page .rh-verify-watch-card p {
    max-width: 720px;

    font-size: 14px;
    line-height: 1.6;
}

.rh-verify-page .rh-verify-watch-card .rh-direct-check-now {
    min-height: 44px;
    padding: 0 16px;

    font-size: 11px;
}

.rh-verify-page .rh-verify-console-warning {
    display: grid;
    gap: 4px;

    padding: 14px 16px;

    border-left: 3px solid var(--rh-red-bright);

    background: rgba(96, 29, 16, 0.15);
}

.rh-verify-page .rh-verify-console-warning strong {
    color: #ffffff;

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

.rh-verify-page .rh-verify-console-warning span {
    color: #a8b2b7;

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

.rh-verify-page .rh-verify-send-panel .rh-verify-info-list {
    margin-bottom: 22px;
}

.rh-verify-page .rh-verify-send-panel .rh-verify-info-list > div {
    grid-template-columns: 64px minmax(0, 1fr);
    min-height: 88px;
}

.rh-verify-page .rh-verify-console-help {
    margin-top: auto;
}

.rh-verify-page .rh-verify-console-help b {
    color: #ffffff;
}

@media (max-width: 980px) {

    .rh-verify-page .rh-verify-command-workspace {
        grid-template-columns: 1fr;
    }

    .rh-verify-page .rh-verify-run-panel,
    .rh-verify-page .rh-verify-send-panel {
        min-height: 0;
    }
}

@media (max-width: 760px) {

    .rh-verify-page .rh-verify-run-steps {
        grid-template-columns: 1fr;
    }

    .rh-verify-page .rh-verify-command-title,
    .rh-verify-page .rh-verify-command-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .rh-verify-page .rh-verify-command-private {
        align-self: flex-start;
    }
}

@media (max-width: 620px) {

    .rh-verify-page .rh-verify-run-heading {
        grid-template-columns: 66px minmax(0, 1fr);
        gap: 14px;
    }

    .rh-verify-page .rh-verify-run-heading-icon {
        width: 62px;
        height: 62px;
    }

    .rh-verify-page .rh-verify-run-heading h2 {
        font-size: 29px;
    }

    .rh-verify-page .rh-verify-run-heading p:not(.rh-flow-eyebrow) {
        font-size: 15px;
    }

    .rh-verify-page .rh-verify-command-box {
        padding: 17px;
    }

    .rh-verify-page .rh-verify-command-input {
        grid-template-columns: 1fr;
    }

    .rh-verify-page .rh-verify-copy-button {
        min-height: 46px;

        border-left: 0;
        border-top: 1px solid #303a41;
    }

    .rh-verify-page .rh-verify-watch-card {
        grid-template-columns: 28px minmax(0, 1fr);
    }

    .rh-verify-page .rh-verify-watch-card .rh-direct-check-now {
        grid-column: 1 / -1;
        width: 100%;
    }
}

/* =========================================================
   VERIFY COMMAND - KEEP THE PRIVATE COMMAND ON ONE LINE
   ========================================================= */

.rh-verify-page .rh-private-command-wrap input {
    width: 100%;
    min-width: 0;

    box-sizing: border-box;

    padding: 15px 16px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #ffffff;

    font: 700 15px/1.4 Consolas, "Courier New", monospace;

    white-space: nowrap;
    overflow-x: auto;
}

.rh-verify-page .rh-private-command-wrap input:focus {
    outline: 0;
}

@media (max-width: 620px) {

    .rh-verify-page .rh-private-command-wrap input {
        font-size: 14px;
    }
}