.replica-map { margin: 2.2rem 0; padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--line); border-radius: 14px; background: var(--panel); }
.replica-primary { width: min(360px, 100%); margin: auto; padding: 1.3rem; border: 1px solid var(--moss); border-radius: 10px; background: color-mix(in srgb, var(--moss) 5%, transparent); text-align: center; }
.replica-map span, .replica-map small { display: block; color: var(--faint); font: 700 0.62rem/1.4 var(--mono); text-transform: uppercase; }
.replica-map strong { display: block; margin: 0.45rem 0; font: 500 1.9rem/1 var(--serif); }
.replica-branch { display: grid; grid-template-columns: 1fr 1fr; width: 50%; height: 48px; margin: auto; }
.replica-branch i { border-bottom: 1px solid var(--jade); }
.replica-branch i:first-child { border-right: 1px solid var(--jade); }
.replica-branch i:last-child { border-left: 1px solid var(--jade); }
.replica-readers { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.replica-readers > div { padding: 1.2rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-soft); text-align: center; }
.lag-meter { display: grid; grid-template-columns: auto 3fr 1fr auto; gap: 0.6rem; align-items: center; margin: 2rem 0; padding: 1.4rem; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--faint); font: 700 0.62rem/1.3 var(--mono); text-transform: uppercase; }
.lag-meter i { height: 12px; }
.lag-applied { background: var(--jade); }
.lag-waiting { background: var(--ember); }
@media (max-width: 620px) { .replica-readers { grid-template-columns: 1fr; } .replica-branch { display: none; } .replica-primary { margin-bottom: 1rem; } .lag-meter { grid-template-columns: 1fr; } }