:root {
    --install-bg: #140b2d;
    --install-panel: #ffffff;
    --install-ink: #1f1637;
    --install-muted: #756c86;
    --install-primary: #7c3aed;
    --install-primary-dark: #5b21b6;
    --install-soft: #f5f1ff;
    --install-border: #e8e0f5;
    --install-good: #0f9f6e;
    --install-bad: #dc2626;
}

* { box-sizing: border-box; }
body.install-body {
    margin: 0;
    min-height: 100vh;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--install-ink);
    background:
        radial-gradient(circle at 20% 0%, rgba(168, 85, 247, .42), transparent 32rem),
        radial-gradient(circle at 100% 100%, rgba(14, 165, 233, .28), transparent 30rem),
        var(--install-bg);
}

.install-shell {
    width: min(980px, calc(100% - 28px));
    min-height: 100vh;
    margin: 0 auto;
    padding: 32px 0;
    display: grid;
    place-items: center;
}

.install-card {
    width: 100%;
    background: var(--install-panel);
    border-radius: 30px;
    padding: 26px;
    box-shadow: 0 26px 80px rgba(0, 0, 0, .32);
    border: 1px solid rgba(255,255,255,.4);
}
.install-card.small { max-width: 620px; }

.install-hero {
    min-height: 140px;
    padding: 24px;
    border-radius: 24px;
    color: #fff;
    background:
        linear-gradient(135deg, rgba(124,58,237,.95), rgba(37,99,235,.88)),
        radial-gradient(circle at 90% 20%, rgba(255,255,255,.25), transparent 12rem);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.install-kicker { display: inline-block; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .84; font-weight: 800; }
.install-hero h1 { margin: 8px 0 6px; font-size: clamp(28px, 5vw, 44px); line-height: 1.05; }
.install-hero p { margin: 0; opacity: .88; max-width: 560px; line-height: 1.6; }
.install-badge { flex: 0 0 auto; padding: 10px 14px; border-radius: 999px; background: rgba(255,255,255,.18); font-weight: 800; }

.install-progress { height: 8px; margin: 18px 4px; border-radius: 999px; background: var(--install-soft); overflow: hidden; }
.install-progress span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--install-primary), #2563eb); transition: width .25s ease; }

.install-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 0 0 22px; }
.install-step { text-decoration: none; color: var(--install-muted); background: #faf8ff; border: 1px solid var(--install-border); border-radius: 16px; padding: 12px; display: flex; align-items: center; gap: 10px; min-width: 0; }
.install-step span { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #eee7ff; color: var(--install-primary); font-weight: 900; flex: 0 0 auto; }
.install-step em { font-style: normal; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.install-step.active { border-color: rgba(124,58,237,.45); background: var(--install-soft); color: var(--install-primary-dark); }
.install-step.done span { background: var(--install-good); color: #fff; }

.install-section-head h2 { margin: 0 0 6px; font-size: 24px; }
.install-section-head p { margin: 0 0 18px; color: var(--install-muted); line-height: 1.6; }

.install-check-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.install-check { border: 1px solid var(--install-border); border-radius: 18px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; }
.install-check strong { display: block; font-size: 14px; }
.install-check small { display: block; color: var(--install-muted); margin-top: 3px; }
.install-check span { border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 900; }
.install-check.ok span { background: rgba(15,159,110,.12); color: var(--install-good); }
.install-check.bad span { background: rgba(220,38,38,.12); color: var(--install-bad); }

.install-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.install-form label { display: grid; gap: 7px; color: var(--install-muted); font-weight: 800; font-size: 13px; }
.install-form input { width: 100%; border: 1px solid var(--install-border); background: #fbfaff; color: var(--install-ink); border-radius: 15px; padding: 13px 14px; outline: none; font: inherit; }
.install-form input:focus { border-color: var(--install-primary); box-shadow: 0 0 0 4px rgba(124,58,237,.12); }

.install-note { border: 1px solid var(--install-border); border-radius: 18px; padding: 16px; background: #faf8ff; color: var(--install-muted); line-height: 1.65; margin-bottom: 18px; }
.install-note.success { border-color: rgba(15,159,110,.22); background: rgba(15,159,110,.08); color: #086445; grid-column: 1 / -1; margin: 4px 0 0; }
.install-note code { color: var(--install-primary-dark); font-weight: 900; }

.install-alert { border-radius: 16px; padding: 13px 15px; margin: 0 0 18px; font-weight: 700; line-height: 1.5; }
.install-alert.danger { background: rgba(220,38,38,.1); color: var(--install-bad); border: 1px solid rgba(220,38,38,.18); }
.install-alert.success { background: rgba(15,159,110,.1); color: var(--install-good); border: 1px solid rgba(15,159,110,.18); }

.install-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 12px; }
.install-actions.split { grid-column: 1 / -1; justify-content: space-between; }
.install-btn { border: 0; text-decoration: none; border-radius: 16px; padding: 13px 18px; font-weight: 900; font: inherit; cursor: pointer; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; }
.install-btn.primary { background: linear-gradient(135deg, var(--install-primary), #2563eb); color: #fff; box-shadow: 0 14px 28px rgba(124,58,237,.24); }
.install-btn.ghost { background: var(--install-soft); color: var(--install-primary-dark); }
.install-btn:disabled { opacity: .55; cursor: not-allowed; box-shadow: none; }

@media (max-width: 760px) {
    .install-shell { width: 100%; padding: 0; display: block; }
    .install-card { min-height: 100vh; border-radius: 0; padding: 16px; box-shadow: none; }
    .install-hero { min-height: 128px; padding: 18px; border-radius: 22px; }
    .install-hero { flex-direction: column; }
    .install-badge { align-self: flex-start; }
    .install-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
    .install-step { padding: 8px 6px; justify-content: center; }
    .install-step em { display: none; }
    .install-check-list, .install-form { grid-template-columns: 1fr; }
    .install-actions, .install-actions.split { flex-direction: column-reverse; }
    .install-btn { width: 100%; }
}

.install-alert.warning {
    background: rgba(245, 158, 11, .12);
    color: #92400e;
    border: 1px solid rgba(245, 158, 11, .24);
}