.msgd {
    --msgd-ink: #172033;
    --msgd-muted: #687386;
    --msgd-line: #dfe5ec;
    --msgd-blue: #137fec;
    width: min(100%, 760px);
    margin: 36px auto;
    padding: clamp(24px, 5vw, 48px);
    color: var(--msgd-ink);
    background: #fff;
    border: 1px solid #e7ebf0;
    border-radius: 24px;
    box-shadow: 0 22px 60px -34px rgba(24, 39, 75, .28);
    box-sizing: border-box;
}

.msgd *, .msgd *::before, .msgd *::after { box-sizing: border-box; }
.msgd__intro { margin-bottom: 28px; }
.msgd__eyebrow { display: block; margin-bottom: 9px; color: var(--msgd-blue); font-size: 11px; font-weight: 800; letter-spacing: .13em; }
.msgd__title { margin: 0 0 9px; color: var(--msgd-ink); font-size: clamp(25px, 4vw, 34px); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.msgd__description { max-width: 590px; margin: 0; color: var(--msgd-muted); font-size: 14px; line-height: 1.7; }
.msgd__form { display: grid; grid-template-columns: .8fr 1.2fr auto; gap: 12px; align-items: end; }
.msgd__field label { display: block; margin: 0 0 7px; color: #344054; font-size: 13px; font-weight: 700; }
.msgd__field input { width: 100%; height: 48px; padding: 0 14px; color: var(--msgd-ink); background: #fff; border: 1px solid var(--msgd-line); border-radius: 11px; font-size: 15px; outline: 0; transition: border-color .16s ease, box-shadow .16s ease; }
.msgd__field input:focus { border-color: var(--msgd-blue); box-shadow: 0 0 0 4px rgba(19, 127, 236, .12); }
.msgd__submit { display: inline-flex; height: 48px; align-items: center; justify-content: center; gap: 12px; padding: 0 19px; color: #fff; background: var(--msgd-blue); border: 0; border-radius: 11px; font-size: 14px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .16s ease, transform .16s ease; }
.msgd__submit:hover { background: #0f68c4; transform: translateY(-1px); }
.msgd__submit:focus-visible { outline: 3px solid rgba(19, 127, 236, .28); outline-offset: 2px; }
.msgd__submit:disabled { opacity: .62; cursor: wait; transform: none; }
.msgd__status { min-height: 22px; margin-top: 14px; color: var(--msgd-muted); font-size: 13px; }
.msgd__status--error { color: #b42318; }
.msgd__status--success { color: #067647; }
.msgd__result-head { display: flex; justify-content: space-between; gap: 16px; margin: 20px 0 10px; padding-top: 20px; border-top: 1px solid #edf0f4; color: var(--msgd-muted); font-size: 13px; }
.msgd__result-head strong { color: var(--msgd-ink); font-size: 15px; }
.msgd__list { display: grid; gap: 10px; }
.msgd-card { display: flex; align-items: center; gap: 14px; padding: 14px; background: #f9fbfd; border: 1px solid #e8edf3; border-radius: 15px; }
.msgd-card__thumb { width: 58px; height: 58px; flex: 0 0 58px; object-fit: cover; background: #eef3f8; border-radius: 11px; }
.msgd-card__thumb--empty { display: grid; place-items: center; color: var(--msgd-blue); font-size: 24px; font-weight: 800; }
.msgd-card__content { min-width: 0; flex: 1; }
.msgd-card h3 { margin: 0 0 4px; color: var(--msgd-ink); font-size: 15px; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgd-card__file { margin: 0 0 6px; color: #475467; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msgd-card__meta { display: flex; gap: 12px; margin: 0; color: var(--msgd-muted); font-size: 12px; }
.msgd-card__download { flex: 0 0 auto; padding: 10px 16px; color: #fff !important; background: var(--msgd-blue); border-radius: 9px; font-size: 13px; font-weight: 800; text-decoration: none !important; }
.msgd-card__download:hover { color: #fff !important; background: #0f68c4; }
.msgd-card__download:focus-visible { outline: 3px solid rgba(19, 127, 236, .28); outline-offset: 2px; }
.msgd__empty { margin-top: 18px; padding: 46px 20px; text-align: center; color: var(--msgd-muted); background: #f8fafc; border-radius: 16px; }
.msgd__empty > span { display: block; margin-bottom: 10px; color: var(--msgd-blue); font-size: 34px; font-weight: 800; }
.msgd__empty strong { display: block; color: var(--msgd-ink); font-size: 15px; }
.msgd__empty p { margin: 7px 0 0; font-size: 13px; }
.msgd__notice { margin: 20px 0 0; padding-top: 17px; color: #8490a3; border-top: 1px solid #edf0f4; font-size: 12px; text-align: center; }

@media (max-width: 720px) {
    .msgd { margin: 20px auto; border-radius: 18px; }
    .msgd__form { grid-template-columns: 1fr; }
    .msgd__submit { width: 100%; }
}

@media (max-width: 520px) {
    .msgd-card { flex-wrap: wrap; }
    .msgd-card__download { width: 100%; text-align: center; }
}