.tencent-cos-modal {
  width: min(100%, 520px);
  max-height: min(760px, calc(100dvh - 32px));
  overflow: auto;
}

.tencent-cos-head { align-items: flex-start; }
.tencent-cos-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tencent-cos-title-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: #edfafa; flex: 0 0 auto; }
.tencent-cos-title > span:last-child { display: grid; gap: 3px; }
.tencent-cos-title small { color: #0f9294; font-size: 12px; line-height: 18px; }
.tencent-cos-title strong { color: #0b2e3a; font-size: 24px; line-height: 32px; }
.tencent-cos-note { margin: 2px 0 22px; padding: 14px 16px; border: 1px solid #d6eeee; border-radius: 12px; background: #f1f8f8; color: #536d76; font-size: 13px; line-height: 1.7; }
.tencent-cos-form { gap: 16px !important; }
.tencent-cos-form label { color: #536d76; font-size: 13px; }
.tencent-cos-form label > span { display: block; line-height: 18px; }
.tencent-cos-form label b { color: #ff5d5d; font-weight: 600; }
.tencent-cos-form input { min-height: 44px; border-color: #c9e0e4; border-radius: 10px; color: #0b2e3a; font-size: 14px; }
.tencent-cos-form input:focus { border-color: #18c7c5; box-shadow: 0 0 0 3px rgba(24, 199, 197, .14); outline: 0; }
.tencent-cos-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tencent-cos-error { margin: -2px 0 0; padding: 10px 12px; border-radius: 9px; background: #fff2ef; color: #c44a2d; font-size: 12px; line-height: 1.5; }
.tencent-cos-actions { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1fr); gap: 10px; margin-top: 3px; }
.tencent-cos-actions button { min-height: 44px; margin: 0; border-radius: 9px !important; font-size: 13px !important; }
.tencent-cos-actions .modal-secondary { border-color: #a9dfe0; background: #f4fbfb; color: #0c8c8e; }
.tencent-cos-actions .modal-submit { background: #18c7c5; color: #0b2e3a; }
.tencent-cos-actions button:disabled { cursor: wait; opacity: .62; }

@media (max-width: 520px) {
  .tencent-cos-modal { max-height: calc(100dvh - 20px); }
  .tencent-cos-grid, .tencent-cos-actions { grid-template-columns: minmax(0, 1fr); }
}