/* URL Compression Check — "how to enable compression" action guide. */
.cc-howto {
    margin: 18px 26px 4px; padding: 18px 20px;
    border: 1px solid #e7eefb; border-radius: 14px; background: #f8fbff;
}
.cc-howto-head { font-weight: 800; color: #0b1f44; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.cc-howto-head i { color: #2563eb; }
.cc-howto-sub { color: #475569; font-size: .92rem; margin: 8px 0 14px; line-height: 1.55; }
.cc-howto-sub strong { color: #0b1f44; }

.cc-snip { margin-bottom: 14px; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; background: #fff; }
.cc-snip-top {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 9px 13px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0;
    font-size: .86rem; font-weight: 700; color: #334155;
}
.cc-copy {
    border: 1px solid #cbd5e1; background: #fff; color: #2563eb; border-radius: 7px;
    padding: 4px 11px; font-weight: 700; font-size: .82rem; cursor: pointer; white-space: nowrap; transition: background .15s;
}
.cc-copy:hover { background: #eff6ff; }
.cc-snip pre {
    margin: 0; padding: 13px 15px; font-size: .85rem; line-height: 1.55; color: #0b1f44;
    white-space: pre-wrap; word-break: break-word; overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.cc-dl-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 16px; }
.cc-dl {
    display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
    background: #2563eb; color: #fff; font-weight: 700; font-size: .92rem;
    padding: 11px 18px; border-radius: 10px; box-shadow: 0 6px 16px rgba(37, 99, 235, .25);
    transition: background .15s, transform .15s;
}
.cc-dl:hover { background: #1d4ed8; color: #fff; transform: translateY(-1px); }
.cc-dl-note { font-size: .82rem; color: #64748b; max-width: 320px; line-height: 1.45; }

.cc-tip { font-size: .86rem; color: #64748b; margin: 6px 0 0; }
.cc-tip i { color: #2563eb; margin-right: 5px; }

@media (max-width: 520px) {
    .cc-howto { margin-left: 16px; margin-right: 16px; }
    .cc-snip-top { flex-wrap: wrap; }
}