* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; color: #172033; background: linear-gradient(135deg, #eaf3ff, #f8fbff 55%, #dbeafe); font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
.card { width: min(100%, 620px); padding: clamp(24px, 6vw, 48px); border: 1px solid #c9d8ec; border-radius: 8px; background: rgba(255, 255, 255, .94); box-shadow: 0 22px 60px rgba(37, 73, 120, .16); }
.eyebrow { margin: 0 0 12px; color: #0b57d0; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
h1 { margin: 0; color: #0b57d0; font-size: clamp(2.1rem, 8vw, 4rem); line-height: 1; }
.card > p:not(.eyebrow):not(.status):not(.address) { color: #48566b; font-size: 1.1rem; }
.install-panel { margin: 28px 0 8px; padding: 20px; border: 1px solid #d9e3f0; border-radius: 8px; background: #f8fbff; text-align: left; }
.install-panel h2 { margin: 0 0 10px; color: #172033; font-size: 1.15rem; }
.btn { width: 100%; margin: 14px 0 8px; padding: 14px 18px; border: 0; border-radius: 6px; color: #fff; background: #0b57d0; font-weight: 800; cursor: pointer; }
.btn:hover { background: #0847aa; }
.btn-secondary { display: block; box-sizing: border-box; color: #0b57d0; background: transparent; border: 1px solid #0b57d0; text-align: center; text-decoration: none; }
.btn-secondary:hover { color: #0847aa; background: #eaf3ff; }
.status { min-height: 24px; color: #52647c; }
.progress-track { height: 14px; margin: 16px 0 8px; overflow: hidden; border-radius: 999px; background: #d9e3f0; }
.progress-fill { display: block; width: 0; height: 100%; border-radius: inherit; background: #0b57d0; transition: width .2s ease; }
.progress-track.is-indeterminate .progress-fill { width: 38%; animation: progress-indeterminate 1.3s ease-in-out infinite; }
.progress-note { margin: 0; color: #52647c; font-size: .9rem; line-height: 1.45; }
.install-panel[data-state="failed"] .progress-fill { width: 100%; background: #b42318; }
.install-panel[data-state="installed"] .progress-track { background: #d8f1e3; }
.install-panel[data-state="installed"] .progress-fill { width: 100%; background: #16834b; }
@keyframes progress-indeterminate { 0% { transform: translateX(-120%); } 50% { transform: translateX(170%); } 100% { transform: translateX(300%); } }
.instructions { display: grid; grid-template-columns: minmax(90px, .35fr) 1fr; gap: 12px 20px; margin: 28px 0; padding-top: 20px; border-top: 1px solid #d9e3f0; }
.instructions h2 { margin: 0; color: #172033; font-size: 1rem; }
.instructions p { margin: 0; color: #52647c; line-height: 1.5; }
.address { overflow-wrap: anywhere; color: #52647c; font-size: .9rem; }
code { color: #172033; }
.text-link { color: #0b57d0; font-weight: 700; }
button.text-link { padding: 0; border: 0; background: transparent; cursor: pointer; font: inherit; text-decoration: underline; }
@media (max-width: 520px) { body { padding: 12px; } .instructions { grid-template-columns: 1fr; gap: 4px; } .instructions h2 { margin-top: 10px; } }