/* Agency Website — installer */
*,*::before,*::after{box-sizing:border-box}
:root{--brand:#6d5efc;--ink:#0e1116;--line:#e7e8f0;--text:#3a3d49;--muted:#8a8fa3}
body{margin:0;font-family:"Inter",-apple-system,sans-serif;color:var(--text);background:#f5f6fa}
h1,h3{font-family:"Space Grotesk","Inter",sans-serif;color:var(--ink);margin:0}
a{color:var(--brand);text-decoration:none}
.setup{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.setup__rail{background:linear-gradient(165deg,#14141d,#1c2334);color:#cdd2e0;padding:40px 30px;display:flex;flex-direction:column}
.setup__brand{font-family:"Space Grotesk",sans-serif;font-weight:700;color:#fff;font-size:1.4rem;letter-spacing:-.01em}
.setup__tag{color:#9aa3b8;margin:12px 0 30px;font-size:.95rem;line-height:1.5}
.setup__steps{list-style:none;margin:0;padding:0;display:grid;gap:4px;position:relative}
/* connector line running through the step dots */
.setup__steps::before{content:"";position:absolute;left:25px;top:26px;bottom:26px;width:2px;background:rgba(255,255,255,.09)}
.setup__steps li{display:flex;align-items:center;gap:14px;padding:11px 12px;border-radius:10px;color:#8b93a7;font-weight:500;position:relative}
.setup__steps li.current{background:rgba(255,255,255,.06);color:#fff}
.setup__steps li.done{color:#e4e7ef}
.setup__steps .dot{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;flex:none;position:relative;z-index:1;
  background:rgba(255,255,255,.09);color:#aab0c4;font-size:.82rem;font-weight:700}
.setup__steps li.current .dot{background:var(--brand);color:#fff;box-shadow:0 0 0 4px rgba(109,94,252,.18)}
.setup__steps li.done .dot{background:#22d3a6;color:#06281c}
.setup__rail-foot{color:#6b7488;font-size:.82rem;margin-top:auto;padding-top:24px}
.setup__main{display:flex;align-items:flex-start;justify-content:center;padding:54px 28px;overflow:auto}
.setup__card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:38px;max-width:560px;width:100%;box-shadow:0 24px 60px -34px rgba(20,18,60,.4)}
.setup__card h1{font-size:1.7rem;margin-bottom:8px}
.setup__card>p{color:var(--text);margin:0 0 22px}
.setup-flash{max-width:560px;width:100%;margin:0 auto 16px;padding:12px 16px;border-radius:10px;font-size:.93rem}
.setup-flash--error{background:#fdecea;color:#a3271a}
.setup-flash--success{background:#e7f8ef;color:#176b43}

.field{margin-bottom:16px}
.field label{display:block;font-weight:500;font-size:.9rem;color:var(--ink);margin-bottom:6px}
.field input,.field select{width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font:inherit;color:var(--ink)}
.field input:focus,.field select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.field-hint{display:block;color:var(--muted);font-size:.82rem;margin-top:6px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:"Space Grotesk",sans-serif;font-weight:600;
  padding:11px 20px;border-radius:10px;border:1.5px solid transparent;cursor:pointer;font-size:.95rem;text-decoration:none}
.btn--primary{background:var(--brand);color:#fff}
.btn--primary:hover{filter:brightness(1.07)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--lg{padding:14px 26px;font-size:1.02rem}
.actions{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap}

.check-list{list-style:none;padding:0;margin:0 0 8px;display:grid;gap:10px}
.check-list li{color:var(--ink);font-weight:500}
.req-list{list-style:none;padding:0;margin:0 0 8px}
.req-list li{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.req-list .req-ico{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:.8rem;font-weight:700}
.req-list li.ok .req-ico{background:#22b07d}
.req-list li.bad .req-ico{background:#e0563f}
.req-label{flex:1;color:var(--ink)}
.req-val{color:var(--muted);font-size:.88rem}
.req-warn{color:#a3271a;font-weight:500}

.db-choice{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:8px}
.db-opt{position:relative;border:1.5px solid var(--line);border-radius:14px;padding:18px;cursor:pointer;transition:.15s}
.db-opt:hover{border-color:var(--brand)}
.db-opt.selected{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 16%,transparent)}
.db-opt input{position:absolute;opacity:0}
.db-opt h3{font-size:1.1rem;margin:8px 0 4px}
.db-opt p{margin:0;font-size:.88rem;color:var(--muted)}
.db-opt .pill{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--brand);background:color-mix(in srgb,var(--brand) 12%,#fff);padding:3px 9px;border-radius:999px}
.mysql-fields{display:none;margin-top:16px}
.mysql-fields.show{display:block}

.setup__card--done{text-align:center}
.done-mark{width:64px;height:64px;border-radius:50%;background:#22b07d;color:#fff;font-size:2rem;display:grid;place-items:center;margin:0 auto 18px}
.done-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0}
.done-tile{display:block;border:1px solid var(--line);border-radius:12px;padding:18px;text-align:left;color:var(--ink)}
.done-tile:hover{border-color:var(--brand)}
.done-tile strong{display:block;color:var(--brand)}
.done-tile span{font-size:.86rem;color:var(--muted)}

@media(max-width:760px){
  .setup{grid-template-columns:1fr}
  .setup__rail{flex-direction:row;align-items:center;flex-wrap:wrap;gap:12px;padding:20px}
  .setup__steps{display:none}
  .row,.db-choice,.done-grid{grid-template-columns:1fr}
}