.ibg-wrapper {
--ibg-primary: #061C4D;
--ibg-primary-hover: #0a2a6b;
--ibg-primary-tint: rgba(6, 28, 77, 0.08);
max-width: 700px;
margin: 0 auto;
padding: 32px 28px;
background: #fdf0f0;
border-radius: 12px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
box-sizing: border-box;
}
.ibg-wrapper * {
box-sizing: border-box;
}
.ibg-title {
text-align: center;
font-size: 32px;
font-weight: 800;
color: var(--ibg-primary);
margin: 0 0 12px;
}
.ibg-subtitle {
text-align: center;
font-size: 17px;
color: #14171f;
margin: 0 0 28px;
}
.ibg-label {
display: block;
font-weight: 700;
font-size: 15px;
color: var(--ibg-primary);
margin: 20px 0 8px;
}
.ibg-info {
display: inline-block;
width: 16px;
height: 16px;
line-height: 16px;
text-align: center;
border-radius: 50%;
background: #c7c9cf;
color: #fff;
font-size: 11px;
font-style: normal;
cursor: help;
margin-left: 2px;
}
.ibg-input,
.ibg-select {
width: 100%;
padding: 14px 16px;
font-size: 15px;
border: 1px solid #d9dbe1;
border-radius: 8px;
background: #fff;
color: #14171f;
appearance: none;
-webkit-appearance: none;
}
.ibg-select {
background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9'><path d='M1 1l6 6 6-6' stroke='%23061C4D' stroke-width='2' fill='none' fill-rule='evenodd'/></svg>");
background-repeat: no-repeat;
background-position: right 16px center;
cursor: pointer;
}
.ibg-input:focus,
.ibg-select:focus {
outline: none;
border-color: var(--ibg-primary);
box-shadow: 0 0 0 3px var(--ibg-primary-tint);
}
.ibg-btn-row {
display: flex;
gap: 12px;
margin-top: 28px;
flex-wrap: wrap;
}
.ibg-button {
flex: 1 1 200px;
padding: 16px;
background: var(--ibg-primary);
color: #fff;
font-size: 15px;
font-weight: 700;
border: 2px solid var(--ibg-primary);
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: background 0.15s ease, color 0.15s ease;
white-space: nowrap;
}
.ibg-button:hover {
background: var(--ibg-primary-hover);
border-color: var(--ibg-primary-hover);
}
.ibg-button-secondary {
background: #fff;
color: var(--ibg-primary);
}
.ibg-button-secondary:hover {
background: var(--ibg-primary-tint);
border-color: var(--ibg-primary);
color: var(--ibg-primary);
}
.ibg-button:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.ibg-spinner {
width: 16px;
height: 16px;
border: 2px solid rgba(6, 28, 77, 0.3);
border-top-color: var(--ibg-primary);
border-radius: 50%;
animation: ibg-spin 0.7s linear infinite;
}
.ibg-button:not(.ibg-button-secondary) .ibg-spinner {
border: 2px solid rgba(255, 255, 255, 0.5);
border-top-color: #fff;
}
@keyframes ibg-spin {
to {
transform: rotate(360deg);
}
}
.ibg-result-block {
margin-top: 6px;
}
.ibg-results {
display: flex;
flex-direction: column;
gap: 16px;
}
.ibg-empty-state {
margin: 0;
padding: 16px;
font-size: 14px;
color: #7a7d87;
background: #fff;
border: 1px dashed #d9dbe1;
border-radius: 8px;
text-align: center;
}
.ibg-result-item {
display: flex;
flex-direction: column;
gap: 6px;
}
.ibg-result-badge {
display: inline-block;
align-self: flex-start;
padding: 3px 10px;
font-size: 12px;
font-weight: 700;
color: #fff;
background: var(--ibg-primary);
border-radius: 999px;
}
.ibg-result-box {
position: relative;
}
.ibg-result-textarea {
width: 100%;
min-height: 110px;
padding: 16px;
padding-right: 48px;
font-size: 15px;
line-height: 1.6;
border: 1px solid #d9dbe1;
border-radius: 8px;
background: #fff;
color: #14171f;
resize: vertical;
white-space: pre-wrap;
}
.ibg-copy-btn {
position: absolute;
bottom: 12px;
right: 12px;
width: 34px;
height: 34px;
border: 1px solid var(--ibg-primary);
border-radius: 8px;
background: #fff;
color: var(--ibg-primary);
cursor: pointer;
font-size: 15px;
line-height: 1;
}
.ibg-copy-btn:hover {
background: var(--ibg-primary-tint);
}
.ibg-copy-msg {
margin-top: 8px;
font-size: 13px;
color: #17bf63;
min-height: 16px;
}
.ibg-error {
color: #e0245e;
}
@media (max-width: 480px) {
.ibg-btn-row {
flex-direction: column;
}
}