:root{--brand:#1d4ed8;--brand-dark:#1e3a8a;--text:#0f172a;--muted:#475569;--line:#cbd5e1;--error:#b91c1c;--radius:10px;color:var(--text);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}body{background:#f8fafc;margin:0}button,input,select{font-family:inherit}a{color:var(--brand)}.screen{flex-direction:column;gap:1rem;max-width:28rem;margin:0 auto;padding:1.5rem 1.25rem 3rem;display:flex}.brand{color:var(--brand);margin:0;font-size:1.5rem}h2{margin:0;font-size:1.25rem}form{flex-direction:column;gap:.75rem;display:flex}label{font-weight:600}input{border:1px solid var(--line);border-radius:var(--radius);background:#fff;width:100%;padding:.75rem;font-size:1.125rem}input:focus-visible,button:focus-visible,a:focus-visible{outline-offset:2px;outline:3px solid #93c5fd}.phone-field{align-items:stretch;gap:.5rem;display:flex}.phone-field span{border:1px solid var(--line);border-radius:var(--radius);background:#e2e8f0;align-items:center;padding:0 .75rem;font-weight:600;display:flex}button{color:#fff;background:var(--brand);border-radius:var(--radius);cursor:pointer;border:0;min-height:3rem;padding:.75rem 1rem;font-size:1rem;font-weight:600}button:hover:not(:disabled){background:var(--brand-dark)}button:disabled{opacity:.6;cursor:not-allowed}button.secondary{color:var(--brand);border:1px solid var(--brand);background:#fff}button.link{min-height:2.5rem;color:var(--brand);background:0 0;font-weight:500;text-decoration:underline}.error{color:var(--error);margin:0;font-weight:500}.stack{flex-direction:column;gap:.5rem;display:flex}.status-chip{color:var(--brand-dark);background:#dbeafe;border-radius:999px;align-self:flex-start;margin:0;padding:.25rem .75rem;font-size:.875rem;font-weight:600}.ticket{border:1px solid var(--line);border-radius:var(--radius);background:#fff;flex-direction:column;align-items:center;gap:.25rem;padding:1.25rem;display:flex}.qr{width:min(16rem,100%);height:auto}.pin-label{color:var(--muted);margin:.5rem 0 0;font-size:.875rem}.pin{letter-spacing:.3em;font-variant-numeric:tabular-nums;margin:0;font-size:2.25rem;font-weight:700}.details{gap:.25rem;margin:0;display:grid}.details dt{color:var(--muted);margin-top:.75rem;font-size:.875rem}.details dd{margin:0}.orders{flex-direction:column;gap:.75rem;margin:0;padding:0;list-style:none;display:flex}.orders a{color:inherit;border:1px solid var(--line);border-radius:var(--radius);background:#fff;flex-direction:column;gap:.125rem;padding:.875rem 1rem;text-decoration:none;display:flex}.orders a span{color:var(--muted);font-size:.875rem}select{border:1px solid var(--line);border-radius:var(--radius);background:#fff;width:100%;padding:.75rem;font-size:1rem}.check{align-items:center;gap:.5rem;font-weight:500;display:flex}.check input{flex-shrink:0;width:1.25rem;height:1.25rem}.note{color:var(--muted);margin:0;font-size:.9375rem}.action{color:#fff;background:var(--brand);border-radius:var(--radius);margin:.25rem 0 .75rem;padding:.75rem 1rem;font-weight:600;text-decoration:none;display:inline-block}.offline-notice{border-radius:var(--radius);background:#fef3c7;border:1px solid #f59e0b;flex-direction:column;gap:.5rem;margin:.5rem 0;padding:.75rem 1rem;display:flex}.offline-notice p{margin:0}.error+button{margin-top:.5rem}.owed-summary{border-radius:var(--radius);color:#064e3b;background:#ecfdf5;border:1px solid #6ee7b7;flex-direction:column;gap:.15rem;padding:.85rem 1rem;text-decoration:none;display:flex}.install-banner{border-radius:var(--radius);color:#1e3a8a;background:#eff6ff;border:1px solid #93c5fd;flex-direction:column;gap:.35rem;padding:.85rem 1rem;display:flex}.install-actions{align-items:center;gap:.75rem;display:flex}.install-actions .link{padding-inline:0}.period{gap:.35rem;display:grid}.period-actions{align-items:center;gap:.75rem;display:flex}.owed{border:1px solid var(--line);border-radius:var(--radius);background:#fff;gap:.4rem;padding:1rem;display:grid}.owed h2{margin:0;font-size:1.1rem}.owed ul{color:var(--muted);margin:0;padding-left:1.1rem;font-size:.9rem}.screen .total{font-size:1.5rem;font-weight:800}.payer-choice{border:1px solid var(--line);border-radius:var(--radius);flex-direction:column;gap:.5rem;margin:0;padding:.75rem 1rem;display:flex}.payer-choice legend{padding:0 .25rem;font-weight:600}
