*{box-sizing:border-box} :root{color-scheme:light;--navy:#192753;--border:#dfe3eb;--muted:#667085}body{margin:0;background:#fff;color:#101828;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}.page{max-width:1200px;margin:0 auto;padding:24px}.topbar{display:flex;align-items:center;gap:14px;margin-bottom:22px}.brand-mark{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:#eef1fa;color:var(--navy);font-size:30px}h1{margin:0;font-size:22px}.topbar p{margin:4px 0 0;color:var(--muted);font-size:14px}.install-btn{margin-left:auto;border:1px solid var(--navy);border-radius:9px;background:#fff;color:var(--navy);padding:11px 15px;font-weight:650;cursor:pointer}.generator-card{border:1px solid var(--border);border-radius:18px;padding:30px;display:grid;grid-template-columns:minmax(320px,1fr) minmax(300px,1fr);gap:36px;min-height:500px}.form-panel{width:100%;max-width:510px}.field{margin-bottom:22px}label{display:block;font-size:16px;font-weight:600;margin-bottom:9px}.field>input,.input-with-prefix,.color-row>input[type=text]{width:100%;height:46px;border:1px solid var(--border);border-radius:10px;background:#fff}.field>input{padding:0 14px;font:inherit}input::placeholder{color:#7b8495}input:focus{outline:2px solid #c7d2fe;outline-offset:1px;border-color:#8796c7}.input-with-prefix{display:flex;align-items:center;gap:12px;padding:0 14px}.input-with-prefix span{color:#667085;font-size:18px}.input-with-prefix input{border:0;outline:0;flex:1;min-width:0;height:100%;background:transparent;font:inherit}.color-row{display:flex;gap:12px}.color-row input[type=color]{width:81px;height:46px;padding:6px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}.color-row>input[type=text]{flex:1;padding:0 14px;font:inherit;min-width:0}.primary-btn{width:100%;border:0;border-radius:10px;background:var(--navy);color:#fff;padding:15px 18px;font-size:16px;font-weight:650;cursor:pointer;display:flex;justify-content:center;align-items:center;gap:22px}.status{min-height:18px;margin:10px 0 0;color:#b42318;font-size:13px}.preview-panel{display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;text-align:center}.qr-placeholder{display:flex;flex-direction:column;align-items:center;color:#98a2b3}.qr-placeholder-icon{font-size:130px;line-height:1.1;color:#111}.qr-output{width:100%;display:flex;flex-direction:column;align-items:center;gap:15px}.qr-canvas-wrap{display:grid;place-items:center;padding:12px;background:white;border-radius:10px;min-height:220px;max-width:100%}.qr-canvas-wrap canvas,.qr-canvas-wrap img{max-width:100%;height:auto;image-rendering:pixelated}.qr-caption{margin:0;font-size:14px;overflow-wrap:anywhere}.download-btn{border:1px solid var(--border);border-radius:9px;padding:12px 17px;background:#fff;font-weight:650;cursor:pointer;color:#18234b}.privacy-note{margin:24px 0 0;color:var(--muted);font-size:12px;text-align:center}footer{padding:20px 4px;color:#667085;text-align:center;font-size:12px}[hidden]{display:none!important}@media(max-width:760px){.page{padding:15px}.topbar{gap:10px}h1{font-size:18px}.topbar p{font-size:12px}.brand-mark{width:40px;height:40px}.install-btn{padding:9px 10px;font-size:13px}.generator-card{grid-template-columns:1fr;gap:18px;padding:20px 17px}.form-panel{max-width:none}.preview-panel{padding:8px 0 0}.qr-placeholder-icon{font-size:100px}}

/* Payee name autocomplete */
.payee-field { position: relative; }
.suggestions-list {
  position: absolute;
  z-index: 20;
  top: calc(100% - 12px);
  left: 0;
  right: 0;
  max-height: 250px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #dfe3eb;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(16,24,40,.14);
  padding: 5px;
  text-align: left;
}
.suggestion-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #101828;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.suggestion-item:hover, .suggestion-item:focus { background: #f0f3fb; outline: none; }
.suggestion-item .suggestion-type { color: #667085; font-size: 12px; white-space: nowrap; }
.suggestion-empty { padding: 11px 12px; color: #667085; font-size: 13px; }

.qr-payee-name { margin: 0 0 2px; font-size: 20px; line-height: 1.3; font-weight: 750; color: #101828; overflow-wrap: anywhere; text-align: center; }

.qr-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:10px; }
.upi-btn { border:0; border-radius:9px; padding:12px 17px; background:#192753; color:#fff; font:inherit; font-weight:650; cursor:pointer; }
.upi-btn:hover { background:#24366e; }
@media (max-width:480px) { .qr-actions { width:100%; flex-direction:column; } .qr-actions button { width:100%; } }

.qr-actions { max-width: 360px; }
.phonepe-btn { background: #5f259f; }
.phonepe-btn:hover { background: #4c1d80; }
.navi-btn { background: #0b7b66; }
.navi-btn:hover { background: #086653; }
.generic-upi-btn { background: #192753; }


/* Strongly styled payment action buttons */
.qr-actions {
  display: flex;
  width: 100%;
  max-width: 390px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  margin-top: 2px;
}
.qr-actions button {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 11px 15px;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.qr-actions button:active { transform: translateY(1px); }
.qr-actions button:focus-visible { outline: 3px solid #c7d2fe; outline-offset: 2px; }
.qr-actions .download-btn {
  flex: 1 1 100%;
  color: #192753 !important;
  background: #f4f6fc !important;
  border-color: #d9dfef !important;
}
.qr-actions .download-btn:hover { background: #e9edfa !important; }
.qr-actions .phonepe-btn {
  flex: 1 1 45%;
  color: #fff !important;
  background: #5f259f !important;
  border-color: #5f259f !important;
}
.qr-actions .phonepe-btn:hover { background: #4c1d80 !important; }
.qr-actions .navi-btn {
  flex: 1 1 45%;
  color: #fff !important;
  background: #087f68 !important;
  border-color: #087f68 !important;
}
.qr-actions .navi-btn:hover { background: #066653 !important; }
.qr-actions .generic-upi-btn {
  flex: 1 1 45%;
  color: #fff !important;
  background: #192753 !important;
  border-color: #192753 !important;
}
.qr-actions .generic-upi-btn:hover { background: #24366e !important; }
@media (max-width: 480px) {
  .qr-actions { max-width: 100%; gap: 9px; }
  .qr-actions .download-btn { flex-basis: 100%; }
  .qr-actions .phonepe-btn,
  .qr-actions .navi-btn,
  .qr-actions .generic-upi-btn { flex: 1 1 100%; width: 100%; }
}


/* Mobile layout correction: keep buttons compact and prevent flex stretching/overflow */
.qr-output,
.qr-actions,
.qr-actions button {
  box-sizing: border-box;
}
.qr-actions {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
  align-content: start;
  overflow: visible;
}
.qr-actions button {
  flex-grow: 0 !important;
  flex-shrink: 1;
  height: auto !important;
  min-height: 44px;
  max-height: none;
  white-space: normal;
  overflow-wrap: anywhere;
}
.qr-actions .download-btn {
  flex: 0 0 100% !important;
  width: 100%;
}
.qr-actions .phonepe-btn,
.qr-actions .navi-btn,
.qr-actions .generic-upi-btn {
  flex: 1 1 calc(50% - 5px) !important;
  width: auto;
  min-width: 0;
}
@media (max-width: 480px) {
  .qr-output { width: 100%; min-width: 0; }
  .qr-actions {
    width: 100%;
    max-width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .qr-actions .download-btn,
  .qr-actions .phonepe-btn,
  .qr-actions .navi-btn,
  .qr-actions .generic-upi-btn {
    flex: 0 0 auto !important;
    width: 100% !important;
    min-width: 0;
    min-height: 46px;
    padding: 12px 14px;
  }
}