.esimcc-container {
    max-width: 540px;
    margin: 1.5rem auto;
    font-family: inherit;
}

.esimcc-card {
    border: 1px solid #e5e7eb;
    border-radius: 1.25rem;
    background: #ffffff;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.06);
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.esimcc-icon {
    color: #1c274c;
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.esimcc-title {
    margin: 0 0 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #0f172a;
}

.esimcc-result {
    margin-bottom: 0.75rem;
}

.esimcc-status {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 800;
    color: #475569;
    letter-spacing: -0.01em;
}

/* Status colour states */
.esimcc-status--ok      { color: #15803d; }
.esimcc-status--likely  { color: #15803d; }
.esimcc-status--no      { color: #b91c1c; }
.esimcc-status--unknown { color: #475569; }

/* Card accent per state */
.esimcc-card--compatible    { border-color: #86efac; box-shadow: 0 10px 30px rgba(21, 128, 61, 0.12); }
.esimcc-card--likely        { border-color: #5eead4; box-shadow: 0 10px 30px rgba(13, 148, 136, 0.12); }
.esimcc-card--not_compatible{ border-color: #fca5a5; box-shadow: 0 10px 30px rgba(185, 28, 28, 0.10); }

/* Progress bar shown while checking */
.esimcc-progress {
    height: 6px;
    width: 100%;
    max-width: 260px;
    margin: 0.85rem auto 0;
    background: #eef2f7;
    border-radius: 999px;
    overflow: hidden;
}

.esimcc-progress-bar {
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: #0db2cc;
    animation: esimcc-indeterminate 1.1s infinite ease-in-out;
}

.esimcc-result--done .esimcc-progress {
    display: none;
}

@keyframes esimcc-indeterminate {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

.esimcc-message {
    margin: 0.65rem 0 0;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #64748b;
}

.esimcc-device-line {
    margin: 0.6rem 0 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #0f172a;
}

@media (max-width: 480px) {
    .esimcc-card {
        padding: 1.5rem 1.1rem;
        border-radius: 1rem;
    }
}