/* Failover server (v1.0.30) */
.fo-flow{display:grid;grid-template-columns:minmax(0,1fr) 54px minmax(0,1fr) 54px minmax(0,1.25fr);align-items:center;gap:0;margin-top:6px}
.fo-node{border:1px solid var(--line);border-radius:14px;background:var(--card2);padding:14px;min-width:0;text-align:center}
.fo-node b{display:block;font:700 14.5px var(--head);margin-top:6px}
.fo-node .tiny{display:block;margin-top:3px}
.fo-node .icon-box{margin:0 auto}
.fo-arrow{height:2px;background:linear-gradient(90deg,rgba(46,229,157,.15),rgba(46,229,157,.6));position:relative;margin:0 6px}
.fo-arrow::after{content:'';position:absolute;right:-1px;top:-4px;border-left:8px solid rgba(46,229,157,.7);border-top:5px solid transparent;border-bottom:5px solid transparent}
.fo-servers{display:flex;flex-direction:column;gap:8px}
.fo-servers .fo-node{display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px}
.fo-servers .fo-node .icon-box{margin:0;width:34px;height:34px}
.fo-servers .fo-node b{margin:0;font-size:14px}
.fo-servers .fo-node.off{opacity:.62;border-style:dashed}
.fo-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px}
.fo-step{border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--bg2);min-width:0}
.fo-step .n{width:28px;height:28px;border-radius:50%;border:1px solid rgba(46,229,157,.4);color:var(--green);display:flex;align-items:center;justify-content:center;font:700 12px var(--mono);margin-bottom:10px}
.fo-step b{display:block;font-size:14.5px;margin-bottom:4px}
.fo-step p{font-size:13.5px;color:var(--muted);line-height:1.55}
.fo-need{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
.fo-need>div{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:14px;background:var(--card2);min-width:0}
.fo-need b{display:block;font-size:14.5px}
.fo-need p{font-size:13.5px;color:var(--muted);margin-top:3px;line-height:1.55}
.fo-note{display:flex;gap:12px;align-items:flex-start;border-radius:14px;padding:14px 16px;background:rgba(245,184,75,.06);border:1px solid rgba(245,184,75,.28);margin-top:14px}
.fo-note p{font-size:13.5px;line-height:1.6;color:#C9CFDA}
.fo-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:16px}
.fo-srv{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--card2);min-width:0;position:relative}
.fo-srv.live{border-color:rgba(46,229,157,.45);box-shadow:0 0 0 1px rgba(46,229,157,.1),0 0 40px rgba(46,229,157,.06)}
.fo-srv.live.backup{border-color:rgba(245,184,75,.5);box-shadow:0 0 0 1px rgba(245,184,75,.12),0 0 40px rgba(245,184,75,.06)}
.fo-srv .ip{font:700 18px var(--mono);margin-top:8px;word-break:break-all}
.fo-srv .lbl{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.fo-srv .live-tag{position:absolute;top:14px;right:14px}
.fo-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
.fo-facts>div{background:var(--card2);border:1px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
.fo-facts .lbl{display:block;font:600 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.fo-guide{counter-reset:fo;display:flex;flex-direction:column;gap:8px;margin:10px 0 0;padding:0;list-style:none}
.fo-guide li{counter-increment:fo;display:flex;gap:10px;font-size:13.5px;color:#C9CFDA;line-height:1.55}
.fo-guide li::before{content:counter(fo);flex:none;width:22px;height:22px;border-radius:50%;background:var(--green-dim);color:var(--green);font:700 11px var(--mono);display:flex;align-items:center;justify-content:center;margin-top:1px}
.fo-guide code,.fo-code{font:600 12.5px var(--mono);background:#0B1017;border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--text)}
.fo-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
.fo-form .full{grid-column:1/-1}
.fo-actions{display:flex;gap:8px;flex-wrap:wrap}
.fo-actions form{margin:0}
@media(max-width:1000px){.fo-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
  .fo-flow{grid-template-columns:1fr;gap:6px}
  .fo-arrow{width:2px;height:22px;margin:0 auto;background:linear-gradient(180deg,rgba(46,229,157,.15),rgba(46,229,157,.6))}
  .fo-arrow::after{right:-4px;top:auto;bottom:-2px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid rgba(46,229,157,.7);border-bottom:0}
  .fo-need,.fo-pair,.fo-form{grid-template-columns:1fr}
  .fo-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:520px){.fo-steps{grid-template-columns:1fr}}
.fo-glow-amber{background:radial-gradient(120% 140% at 0% 0%,rgba(245,184,75,.12),transparent 55%),var(--card);border-color:rgba(245,184,75,.3)}
.fo-need p b{display:inline;font-size:inherit}
/* Sisir UX: kolom formulir tidak boleh melebar karena teks pilihan yang panjang (HP melebar 22px) */
.fo-form>*{min-width:0}
.fo-form select{max-width:100%}
@media(max-width:760px){.fo-form{grid-template-columns:minmax(0,1fr)}}