/**
 * OceanVPS Proxy Setup — customer UI styles.
 * UI/layout only. All selectors are scoped to .ovps-proxy.
 */
.ovps-proxy {
    --ovps-border: #dbe7ec;
    --ovps-surface: #ffffff;
    --ovps-page: #f5fafb;
    --ovps-text: #0f2a3f;
    --ovps-muted: #5c7285;
    --ovps-primary: #0a7f8c;
    --ovps-primary-2: #11b0ad;
    --ovps-primary-soft: #e9fafa;
    --ovps-success: #18a66a;
    --ovps-danger-bg: #fff4f4;
    --ovps-danger-border: #f2caca;
    --ovps-danger-text: #b42318;
    --ovps-radius: 16px;
    --ovps-radius-sm: 10px;
    --ovps-shadow: 0 6px 22px rgba(15, 42, 63, .07), 0 1px 2px rgba(15, 42, 63, .04);
    --ovps-ring: 0 0 0 3px rgba(10, 127, 140, .14);
    color: var(--ovps-text);
    font-size: 13.5px;
    line-height: 1.5;
    width: 100%;
    max-width: 100%;
}
.ovps-proxy *, .ovps-proxy *::before, .ovps-proxy *::after { box-sizing: border-box; }

.ovps-proxy-intro {
    color: var(--ovps-muted);
    margin: 0 0 14px;
    font-size: 12.5px;
}

/* Three-column desktop layout: existing content only. */
.ovps-proxy-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}
@media (min-width: 1180px) {
    .ovps-proxy-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); }
}

/* The existing form becomes the first two visual columns without changing form behavior. */
.ovps-proxy-form-panel {
    display: contents;
}
.ovps-proxy-form-panel > .ovps-proxy-h2,
.ovps-proxy-form-panel > .ovps-proxy-sub,
.ovps-proxy-form-panel > .ovps-proxy-alert,
.ovps-proxy-form-panel > .ovps-proxy-result { display: none; }

.ovps-proxy-form {
    display: contents;
}

.ovps-proxy-form::before { content: none; }

.ovps-proxy-server-card,
.ovps-proxy-proxy-card {
    min-width: 0;
}

.ovps-proxy-panel {
    position: relative;
    background: var(--ovps-surface);
    border: 1px solid var(--ovps-border);
    border-radius: var(--ovps-radius);
    padding: 20px 18px 18px;
    box-shadow: var(--ovps-shadow);
    overflow: hidden;
}
/* Subtle premium teal top-accent on every card */
.ovps-proxy-panel::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--ovps-primary), var(--ovps-primary-2));
    opacity: .9;
}

.ovps-proxy-h2 {
    margin: 0 0 4px;
    color: var(--ovps-text);
    font-size: 16.5px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -.01em;
}
.ovps-proxy-sub {
    margin: 0 0 12px;
    color: var(--ovps-muted);
    font-size: 11.5px;
}
.ovps-proxy-save-note { color: var(--ovps-danger-text); font-weight: 600; }

.ovps-proxy-label {
    display: block;
    margin: 11px 0 5px;
    color: #57708a;
    font-size: 10.5px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ovps-proxy-input {
    display: block;
    width: 100%;
    height: 40px;
    min-height: 40px;
    margin: 0;
    padding: 9px 12px;
    border: 1px solid #d5e2e8;
    border-radius: var(--ovps-radius-sm);
    background: #fcfdfe;
    color: var(--ovps-text);
    font-size: 13px;
    line-height: 1.3;
    box-shadow: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ovps-proxy-input:hover { border-color: #bcd2da; }
.ovps-proxy-input:focus {
    outline: none;
    background: #fff;
    border-color: var(--ovps-primary);
    box-shadow: var(--ovps-ring);
}
.ovps-proxy-input::placeholder { color: #a7b6c2; }
.ovps-proxy-input-small { max-width: 120px; }
.ovps-proxy-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ovps-proxy-hint { margin: 6px 0 0; color: #8494a3; font-size: 11px; line-height: 1.45; }

.ovps-proxy-or {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 3px;
}
.ovps-proxy-or::before, .ovps-proxy-or::after {
    content: "";
    height: 1px;
    flex: 1;
    background: var(--ovps-border);
}
.ovps-proxy-or span {
    color: #8a9aaa;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ovps-proxy-modes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    margin-top: 5px;
}
.ovps-proxy-mode {
    display: block;
    cursor: pointer;
    padding: 9px;
    border: 1px solid var(--ovps-border);
    border-radius: 8px;
    background: #fff;
}
.ovps-proxy-mode input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.ovps-proxy-mode-body strong { display: block; color: var(--ovps-text); font-size: 11.5px; font-weight: 750; }
.ovps-proxy-mode-body span { display: block; margin-top: 2px; color: var(--ovps-muted); font-size: 9.5px; }
.ovps-proxy-mode:has(input:checked) {
    border-color: var(--ovps-primary);
    background: var(--ovps-primary-soft);
    box-shadow: inset 0 0 0 1px rgba(8, 127, 140, .08);
}

.ovps-proxy-button {
    grid-column: 1 / -1;
    width: 100%;
    margin: 2px 0 0;
    min-height: 42px;
    padding: 11px 16px;
    border: 0;
    border-radius: var(--ovps-radius-sm);
    background: linear-gradient(90deg, var(--ovps-primary), var(--ovps-primary-2));
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .01em;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(10, 127, 140, .28);
    transition: box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
.ovps-proxy-button:hover { box-shadow: 0 8px 22px rgba(10, 127, 140, .34); transform: translateY(-1px); }
.ovps-proxy-button:active { transform: translateY(1px); box-shadow: 0 3px 10px rgba(10, 127, 140, .28); }
.ovps-proxy-button:disabled, .ovps-proxy-button.is-busy { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }

.ovps-proxy-alert {
    margin: 0;
    padding: 9px 11px;
    border: 1px solid var(--ovps-danger-border);
    border-radius: 8px;
    background: var(--ovps-danger-bg);
    color: var(--ovps-danger-text);
    font-size: 11px;
    font-weight: 650;
}

/* Progress */
.ovps-proxy-progress-panel { min-width: 0; }
.ovps-proxy-progress-idle .ovps-proxy-sub { margin-bottom: 0; }
.ovps-proxy-progress-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ovps-proxy-progress-head .ovps-proxy-h2 { margin: 0; }
.ovps-proxy-progress-head .ovps-proxy-h2.is-success { color: #148b5b; }
.ovps-proxy-progress-head .ovps-proxy-h2.is-error { color: var(--ovps-danger-text); }
.ovps-proxy-pct {
    flex: none;
    padding: 4px 11px;
    border: 1px solid #bfe6df;
    border-radius: 999px;
    background: var(--ovps-primary-soft);
    color: var(--ovps-primary);
    font-size: 11.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.ovps-proxy-bar { height: 9px; margin-top: 11px; overflow: hidden; border-radius: 999px; background: #e7f0f2; box-shadow: inset 0 1px 2px rgba(15,42,63,.06); }
.ovps-proxy-bar-fill {
    display: block;
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--ovps-primary), var(--ovps-primary-2));
    background-size: 200% 100%;
    transition: width .35s ease;
    animation: ovpsSheen 2.2s linear infinite;
}
@keyframes ovpsSheen { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .ovps-proxy-bar-fill { animation: none; } }
.ovps-proxy-current { margin: 9px 0 2px; color: var(--ovps-text); font-size: 11.5px; font-weight: 750; }
.ovps-proxy-stepcount { margin: 0; color: var(--ovps-muted); font-size: 10px; }
.ovps-proxy-checklist {
    list-style: none;
    margin: 11px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 12px;
}
.ovps-proxy-check { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 10.5px; }
.ovps-proxy-check-icon {
    width: 16px;
    height: 16px;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 800;
}
.ovps-proxy-check-pending .ovps-proxy-check-icon { color: #95a5b3; background: #f1f5f7; }
.ovps-proxy-check-pending .ovps-proxy-check-label { color: #95a5b3; }
.ovps-proxy-check-running .ovps-proxy-check-icon { color: #fff; background: var(--ovps-primary); animation: ovpsPulse 1s infinite; }
.ovps-proxy-check-running .ovps-proxy-check-label { color: var(--ovps-text); font-weight: 750; }
.ovps-proxy-check-done .ovps-proxy-check-icon { color: #fff; background: var(--ovps-success); }
.ovps-proxy-check-done .ovps-proxy-check-label { color: var(--ovps-text); }
.ovps-proxy-check-failed .ovps-proxy-check-icon { color: #fff; background: #e5484d; }
.ovps-proxy-check-failed .ovps-proxy-check-label { color: var(--ovps-danger-text); font-weight: 750; }
@keyframes ovpsPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
.ovps-proxy-activity-wrap { margin-top: 12px; }
.ovps-proxy-activity-title { margin-bottom: 5px; color: #6c8092; font-size: 9px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.ovps-proxy-activity {
    max-height: 8.5rem;
    overflow-y: auto;
    padding: 8px 9px;
    border: 1px solid var(--ovps-border);
    border-radius: 8px;
    background: #f8fbfc;
    color: #385064;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 9.5px;
    line-height: 1.65;
}
.ovps-proxy-activity-line { white-space: pre-wrap; word-break: break-word; }
.ovps-proxy-activity-ts { color: #94a4b1; }

/* Result: remains the existing result block, presented full-width when visible. */
.ovps-proxy-result {
    position: relative;
    grid-column: 1 / -1;
    margin: 0;
    padding: 18px;
    border: 1px solid #a7e0d3;
    border-radius: var(--ovps-radius);
    background: linear-gradient(180deg, #f2fcf9, #ffffff 60%);
    box-shadow: var(--ovps-shadow);
    overflow: hidden;
}
.ovps-proxy-result::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--ovps-success), var(--ovps-primary-2));
}
.ovps-proxy-result .ovps-proxy-h2 { margin-bottom: 3px; display: flex; align-items: center; gap: 8px; color: #0f7a4f; }
.ovps-proxy-result .ovps-proxy-h2::before {
    content: "\2713";
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; flex: none;
    border-radius: 50%;
    background: var(--ovps-success); color: #fff;
    font-size: 13px; font-weight: 800;
}
.ovps-proxy-result .ovps-proxy-sub { margin-bottom: 10px; }
.ovps-proxy-result-rows { display: flex; flex-direction: column; gap: 7px; }
.ovps-proxy-result-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--ovps-border);
    border-radius: 8px;
    background: #fff;
}
.ovps-proxy-result-row.is-prominent { border-color: #9adbd4; background: #f5fcfb; }
.ovps-proxy-result-label { min-width: 105px; color: #6a7f91; font-size: 9px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.ovps-proxy-result-value { flex: 1; min-width: 0; color: var(--ovps-text); font-size: 11px; word-break: break-all; }
.ovps-proxy-result-actions { display: inline-flex; gap: 5px; margin-left: auto; }
.ovps-proxy-mini {
    padding: 5px 11px;
    border: 1px solid var(--ovps-border);
    border-radius: 8px;
    background: #fff;
    color: var(--ovps-text);
    font-size: 10.5px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ovps-proxy-mini:hover { border-color: var(--ovps-primary); color: var(--ovps-primary); background: var(--ovps-primary-soft); }

/* Normal password fields only: no custom eye/toggle/pseudo-element. */
.ovps-proxy input[type="password"] {
    appearance: auto;
    -webkit-appearance: auto;
    padding-right: 11px;
}
.ovps-proxy input[type="password"]::-ms-reveal,
.ovps-proxy input[type="password"]::-ms-clear,
.ovps-proxy input[type="password"]::-webkit-credentials-auto-fill-button,
.ovps-proxy input[type="password"]::-webkit-strong-password-auto-fill-button { display: none; }

.ovps-proxy-login-required, .ovps-proxy-login-required.ovps-proxy { padding: 20px; }

@media (max-width: 1179px) {
    .ovps-proxy-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
    .ovps-proxy-form-panel > .ovps-proxy-result { display: block; }
    .ovps-proxy-button { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
    .ovps-proxy-form { grid-template-columns: 1fr; }
    .ovps-proxy-checklist { grid-template-columns: 1fr; }
    .ovps-proxy-modes { grid-template-columns: 1fr; }
    .ovps-proxy-button { grid-column: auto; }
    .ovps-proxy-result { grid-column: auto; }
}

@media (min-width: 1180px) {
    .ovps-proxy-form { display: contents; }
    .ovps-proxy-server-card { grid-column: 1; grid-row: 1; }
    .ovps-proxy-proxy-card { grid-column: 2; grid-row: 1; }
    .ovps-proxy-progress-panel { grid-column: 3; grid-row: 1; }
    .ovps-proxy-result { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 1179px) {
    .ovps-proxy-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
    .ovps-proxy-server-card { grid-column: 1; grid-row: 1; }
    .ovps-proxy-proxy-card { grid-column: 2; grid-row: 1; }
    .ovps-proxy-progress-panel { grid-column: 1 / -1; grid-row: 2; }
    .ovps-proxy-result { grid-column: 1 / -1; grid-row: 3; }
}

@media (max-width: 760px) {
    .ovps-proxy-form { grid-template-columns: 1fr; }
    .ovps-proxy-server-card,
    .ovps-proxy-proxy-card,
    .ovps-proxy-progress-panel,
    .ovps-proxy-result { grid-column: 1; }
    .ovps-proxy-server-card { grid-row: 1; }
    .ovps-proxy-proxy-card { grid-row: 2; }
    .ovps-proxy-progress-panel { grid-row: 3; }
    .ovps-proxy-result { grid-row: 4; }
    .ovps-proxy-checklist { grid-template-columns: 1fr; }
    .ovps-proxy-modes { grid-template-columns: 1fr; }
}