/* Installer presentation follows the CUSTO foundation setup design. */
:root { --ink:#24394b; --muted:#708493; --line:#dce7ed; --green:#267dc0; --green-dark:#17395d; --green-bg:#e4f5ed; --amber:#93590a; --amber-bg:#fdf3e3; --red:#a8443d; --red-bg:#fff0ed; }
body { margin:0; background:linear-gradient(135deg,#aebfea 0%,#e9f5f8 48%,#a8d7e3 100%) fixed; font:14px/1.5 'Segoe UI',Arial,sans-serif; color:var(--ink); }
.wrap { width:min(1000px,calc(100% - 32px)); max-width:1000px; margin:34px auto; padding:0 0 24px; background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow:0 25px 80px #17395d22; overflow:hidden; }
.installer-brand { min-height:76px; display:flex; align-items:center; gap:13px; padding:16px 30px; border-bottom:1px solid var(--line); }
.installer-brand img { width:38px; height:44px; object-fit:contain; }
.installer-brand strong { display:block; letter-spacing:1px; color:#17395d; font-size:16px; }
.installer-brand strong span { color:#267dc0; font-weight:400; }
.installer-brand small { display:block; color:var(--muted); font-size:11px; }
.installer-brand .installer-progress { margin-left:auto; font-style:normal; font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:5px 11px; white-space:nowrap; }
.masthead { padding:38px 42px 28px; margin:0; background:linear-gradient(110deg,#fff,#f1f9fc); color:var(--ink); border-radius:0; }
.masthead h1 { font-size:29px; line-height:1.25; color:#17395d; margin:0 0 10px; letter-spacing:-.02em; }
.masthead p { max-width:720px; color:var(--muted); opacity:1; font-size:14px; margin:0; }
.masthead .eyebrow { font-size:10px; letter-spacing:2px; font-weight:700; color:#63839a; margin:0 0 9px; }
.masthead code { background:#edf6fa; color:var(--ink); }
.steps { display:flex; flex-wrap:wrap; gap:8px; padding:20px 42px; margin:0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:#f7fafb; }
.steps a { border:1px solid var(--line); border-radius:5px; padding:7px 10px; background:#fff; color:#426079; font-size:11px; text-decoration:none; }
.steps a.is-current { border-color:#267dc0; background:#267dc0; color:#fff; }
.steps a.is-done { background:#e4f5ed; color:#276b4d; border-color:#cde9db; }
.steps a.is-blocked { opacity:.45; }
.panel { margin:0; padding:27px 42px; border:0; border-top:1px solid var(--line); border-radius:0; box-shadow:none; background:#fff; }
.panel h2 { font-size:18px; color:#17395d; margin:0 0 16px; }
.panel h3 { font-size:14px; color:#426079; }
.note { margin:18px 42px; border-radius:6px; padding:12px 15px; font-size:13px; }
.panel .note { margin:0 0 18px; }
.note-ok { background:#e4f5ed; color:#276b4d; }
.note-fail { background:#fff0ed; color:#943c32; }
.note-warn { background:#fdf3e3; color:#93590a; }
.field { margin-bottom:17px; }
.field label { font-size:12px; font-weight:600; color:#426079; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=url], .field input[type=number], .field select { display:block; width:100%; padding:10px 11px; margin-top:6px; border:1px solid #d4e0e7; border-radius:5px; color:#28465c; background:#fff; font:inherit; }
.field input:focus, .field select:focus { outline:2px solid #267dc0; outline-offset:1px; }
.field .hint { font-size:12px; }
.group { border:1px solid var(--line); border-radius:6px; padding:12px 14px; margin-bottom:12px; background:#f8fafb; }
.group h3 { margin:0 0 10px; }
table { font-size:12px; width:100%; border-collapse:collapse; }
th { font-size:10px; color:var(--muted); letter-spacing:.04em; }
td { border-color:#e5edf2; overflow-wrap:anywhere; }
.pill { font-size:10px; }
.facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; }
.fact { background:#f5f8fa; border:1px solid var(--line); border-radius:6px; }
.fact .v { font-size:13px; color:#28465c; }
.actions { display:flex; flex-wrap:wrap; gap:9px; padding:20px 42px; margin:0; background:#f7fafb; border-top:1px solid var(--line); }
.panel .actions { margin:22px -42px -27px; }
button, .btn { display:inline-block; border:0; border-radius:5px; padding:11px 18px; font-size:13px; font-weight:700; font-family:inherit; background:#267dc0; color:#fff; text-decoration:none; cursor:pointer; }
button:hover, .btn:hover { background:#17395d; }
button.secondary { background:#e3eaee; color:#294760; border:0; }
button.secondary:hover { background:#d3e0e8; }
button:disabled { opacity:.45; }
button:focus-visible, a:focus-visible { outline:3px solid #267dc0; outline-offset:3px; }
pre { background:#17395d; border-radius:6px; font-size:12px; }
code { background:#edf6fa; border-radius:4px; color:#28465c; }
@media(max-width:760px) {
    .wrap { margin:12px auto; }
    .installer-brand { padding:16px 20px; flex-wrap:wrap; }
    .installer-brand strong { font-size:13px; }
    .installer-brand .installer-progress { margin-left:51px; }
    .masthead, .panel { padding:25px 22px; }
    .masthead h1 { font-size:24px; }
    .steps { padding:16px 22px; }
    .note { margin:16px 22px; }
    .actions { padding:22px; }
    .panel .actions { margin:22px -22px -25px; }
    .actions button { flex:1; }
    .facts { grid-template-columns:1fr; }
    th,td { padding:7px 5px; }
}
.server-guide-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:20px 0; }
.server-guide-option { padding:18px; text-align:left; border:1px solid var(--line) !important; background:#f5f8fa !important; }
.server-guide-option strong { display:block; font-size:14px; }
.server-guide-option small { display:block; margin-top:6px; color:var(--muted); font-weight:400; line-height:1.5; }
.server-guide-option[aria-pressed="true"] { border-color:#267dc0 !important; box-shadow:0 0 0 2px #267dc022; background:#edf6fa !important; }
.server-guide-details { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); }
.server-guide-details[hidden] { display:none !important; }
.server-guide-details ol { padding-left:22px; }
.server-guide-details li { padding-left:5px; margin-bottom:14px; line-height:1.7; }
.server-guide-details pre { white-space:pre-wrap; overflow-wrap:anywhere; }
.server-guide-details pre code { background:transparent; color:inherit; }
@media(max-width:600px) { .server-guide-options { grid-template-columns:1fr; } }
