.tpkp-card{max-width:860px;border:1px solid #e5e7eb;border-radius:18px;padding:18px;background:#f9fafb;box-shadow:0 18px 40px rgba(0,0,0,.08)}
.tpkp-title{font-weight:800;font-size:22px;margin:0 0 6px 0}
.tpkp-intro{color:#374151;font-size:13px;line-height:1.4;margin-bottom:14px}
.tpkp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
@media (max-width:760px){.tpkp-grid{grid-template-columns:1fr}}
.tpkp-span2{grid-column:span 2}
@media (max-width:760px){.tpkp-span2{grid-column:auto}}
.tpkp-field{display:flex;flex-direction:column;gap:6px}
.tpkp-field--inline{gap:6px}
.tpkp-label{font-weight:600;font-size:13px;color:#374151}
.tpkp-input{width:100%;border:1px solid #d1d5db;border-radius:12px;padding:11px 14px;background:#fff;color:#111827}
.tpkp-input:focus{outline:none;border-color:#9ca3af;box-shadow:0 0 0 3px rgba(59,130,246,.12)}
.tpkp-input:-webkit-autofill,.tpkp-input:-webkit-autofill:hover,.tpkp-input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #fff inset !important;box-shadow:0 0 0 1000px #fff inset !important;-webkit-text-fill-color:#111827 !important}

.tpkp-helper{color:#6b7280;font-size:13px;margin-top:10px}
.tpkp-actions-row{display:flex;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap}
.tpkp-status{color:#6b7280;font-size:13px}
.tpkp-status.is-error{color:#b91c1c}

.tpkp-btn{border-radius:12px;padding:11px 16px;font-weight:700;cursor:pointer;line-height:1;border:1px solid #d1d5db;background:#fff;color:#111827}
.tpkp-btn--secondary{background:#fff}
.tpkp-btn.is-disabled{opacity:.45;cursor:not-allowed}

.tpkp-field--checkbox{justify-content:end}
.tpkp-checkbox{display:flex;gap:10px;align-items:center;margin-top:22px}
.tpkp-checkbox input{width:18px;height:18px}

.tpkp-code-wrap{margin-top:12px}
.tpkp-code-wrap.is-hidden{display:none}
.tpkp-code-boxes{display:flex;gap:8px;margin-top:8px}
.tpkp-code{width:44px;text-align:center;font-size:18px;padding:10px;border-radius:12px;border:1px solid #d1d5db;background:#fff}

.tpkp-generate-row{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end;margin-top:12px}
@media (max-width:760px){.tpkp-generate-row{grid-template-columns:1fr}}


/* --- v1.2.6 layout + visibility fixes --- */
.tpkp-card{max-width:860px;margin:0 auto !important;}
.tpkp-grid{gap:14px 16px !important;}
.tpkp-actions-row{justify-content:flex-start !important}
.tpkp-status{margin-left:4px; min-height:18px;}
.tpkp-code{color:#111827 !important; caret-color:#111827 !important; background:#ffffff !important; border:1px solid #d1d5db !important;}
.tpkp-code::placeholder{color:#9ca3af !important;}
.tpkp-code-boxes{gap:10px !important;}
.tpkp-code{width:52px !important; height:52px !important; font-size:20px !important; line-height:1 !important; font-weight:700 !important;}
.tpkp-generate-row{grid-template-columns:1fr auto !important; align-items:end !important;}
@media (max-width:760px){.tpkp-generate-row{grid-template-columns:1fr !important;}}
/* checkbox alignment */
.tpkp-checkbox-row{display:flex;align-items:center;gap:10px;margin-top:6px;}
.tpkp-checkbox-row input[type="checkbox"]{width:18px;height:18px;}
/* tighten vertical rhythm */
.tpkp-helper{margin-top:8px !important;}
.tpkp-intro{margin-bottom:12px !important;}

/* --- v1.2.7 move generate button under OTP boxes --- */
.tpkp-generate-under-code{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.tpkp-helper--tight{margin-top:0 !important}