.cc-about-overlay[hidden] { display: none; }

.cc-about-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(8, 28, 45, 0.3);
}

.cc-about-dialog {
    width: min(440px, calc(100vw - 32px));
    overflow: hidden;
    color: #173f59;
    background: #fff;
    border: 1px solid #c8d5dd;
    border-radius: 10px;
    box-shadow: 0 18px 55px rgba(8, 28, 45, 0.24);
    font-family: Inter, Arial, sans-serif;
}

.cc-about-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 42px;
    padding: 0 10px 0 16px;
    color: #456274;
    background: #f2f5f6;
    font-size: 13px;
}

.cc-about-close {
    border: 0;
    padding: 4px 7px;
    color: #627986;
    background: transparent;
    font-size: 25px;
    line-height: 1;
    cursor: pointer;
}

.cc-about-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 285px;
    padding: 42px 30px 30px;
    text-align: center;
}

.cc-about-logo { width: 68px; height: 68px; object-fit: contain; }
.cc-about-body h2 { margin: 18px 0 8px; color: #123c56; font-size: 23px; }
.cc-about-description { margin: 0 0 20px; color: #496777; font-size: 14px; }

.cc-about-versions { margin: 0; font-size: 14px; }
.cc-about-versions div { display: grid; grid-template-columns: auto auto; gap: 8px; justify-content: center; margin: 6px 0; }
.cc-about-versions dt { color: #627986; }
.cc-about-versions dd { margin: 0; color: #173f59; font-weight: 600; }
.cc-about-copyright { margin: 24px 0 0; color: #496777; font-size: 14px; }

.cc-about-footer {
    display: flex;
    justify-content: flex-end;
    padding: 15px 16px;
    background: #f2f5f6;
    border-top: 1px solid #d7e0e5;
}

.cc-about-ok {
    min-width: 88px;
    padding: 7px 18px;
    color: #173f59;
    background: #fff;
    border: 1px solid #8da4b1;
    border-radius: 4px;
    cursor: pointer;
}

.cc-about-ok:hover, .cc-about-ok:focus { border-color: #0b9fc3; outline: none; }

@media (max-width: 520px) {
    .cc-about-overlay { padding: 10px; }
    .cc-about-body { min-height: 250px; padding: 30px 20px 24px; }
}