.monip-card {
max-width: 640px;
margin: 24px auto;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(15, 45, 90, 0.12);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background: #ffffff;
border: 1px solid #e3e8ef;
}
.monip-card__header {
background: linear-gradient(135deg, #0b5fa5 0%, #0a3d78 100%);
color: #ffffff;
padding: 32px 24px 28px;
text-align: center;
}
.monip-card__label {
margin: 0 0 8px;
font-size: 14px;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.85;
}
.monip-card__ip-row {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
}
.monip-card__ip {
font-size: 34px;
font-weight: 700;
letter-spacing: 0.02em;
word-break: break-all;
}
.monip-copy-btn {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.4);
color: #ffffff;
border-radius: 6px;
padding: 6px 14px;
font-size: 13px;
cursor: pointer;
transition: background 0.15s ease;
}
.monip-copy-btn:hover {
background: rgba(255, 255, 255, 0.28);
}
.monip-badge {
display: inline-block;
margin-top: 12px;
padding: 4px 12px;
border-radius: 999px;
background: rgba(255, 255, 255, 0.18);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
}
.monip-notice {
margin: 14px 0 0;
font-size: 13px;
opacity: 0.9;
}
.monip-card__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0;
background: #f4f7fb;
}
.monip-item {
padding: 16px 20px;
border-bottom: 1px solid #e3e8ef;
border-right: 1px solid #e3e8ef;
}
.monip-item:nth-child(2n) {
border-right: none;
}
.monip-item--full {
grid-column: 1 / -1;
border-right: none;
}
.monip-item__label {
display: block;
font-size: 12px;
color: #6b7a90;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 4px;
}
.monip-item__value {
display: block;
font-size: 15px;
font-weight: 600;
color: #16233a;
word-break: break-word;
}
.monip-card__footer {
margin: 0;
padding: 14px 20px;
font-size: 12px;
color: #6b7a90;
background: #ffffff;
border-top: 1px solid #e3e8ef;
}
.monip-inline {
font-family: Consolas, Monaco, "Courier New", monospace;
background: #f1f4f9;
padding: 1px 6px;
border-radius: 4px;
}
@media (max-width: 480px) {
.monip-card__grid {
grid-template-columns: 1fr;
}
.monip-item {
border-right: none;
}
.monip-card__ip {
font-size: 26px;
}
}