@media screen {
  .cof-section { border-top: 1px solid var(--panel-border,#e3e7ed); margin: 24px 0; padding: 22px 0 4px; min-width: 0; }
  .cof-heading-row { align-items: flex-start; }
  .cof-heading-row h4, .cof-editor h5, .cof-preview h5 { margin: 0; }
  .cof-editor { border: 1px solid #cfe1f0; border-radius: 12px; background: #f5f9fd; margin: 18px 0; padding: 16px; }
  .cof-editor input[type="file"] { padding: 9px; background: #fff; }
  .cof-toolbar { display: flex; justify-content: flex-end; margin: 16px 0 10px; }
  .cof-toolbar .field-label { width: min(100%,260px); }
  .cof-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
  .cof-file { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid var(--panel-border,#e3e7ed); border-left: 4px solid #2f9ee5; border-radius: 10px; background: #fff; padding: 14px; min-width: 0; }
  .cof-file.is-archived { border-left-color: #8a96a8; background: #f6f7f9; }
  .cof-file-info { min-width: 0; flex: 1 1 260px; }
  .cof-file-info strong { display: block; overflow-wrap: anywhere; }
  .cof-file-info p { margin: 5px 0 0; color: var(--panel-muted,#647083); font-size: 12px; overflow-wrap: anywhere; }
  .cof-state { color: #7c5b00; font-size: 12px; font-weight: 600; }
  .cof-preview { border: 1px solid #bcd8eb; border-radius: 12px; background: #eef7fd; margin: 18px 0; padding: 14px; }
  .cof-preview img { display: block; width: auto; max-width: 100%; max-height: 520px; object-fit: contain; border-radius: 8px; margin: 12px auto; background: #0d1d31; }
  .cof-preview figcaption { color: var(--panel-muted,#647083); font-size: 13px; text-align: center; overflow-wrap: anywhere; }
  .cof-history { border-top: 1px solid var(--panel-border,#e3e7ed); margin-top: 20px; padding-top: 14px; }
  .cof-history > summary { cursor: pointer; font-weight: 600; color: var(--panel-text,#202b3c); }
  .cof-history ol { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 22px; }
  .cof-history li { font-size: 13px; }
  .cof-history li strong { display: block; }
  .cof-history li span { color: var(--panel-muted,#647083); }
}
@media screen and (max-width: 600px) {
  .cof-heading-row, .cof-file { align-items: stretch; }
  .cof-heading-row .form-actions, .cof-file .form-actions { width: 100%; }
  .cof-heading-row .form-actions .button, .cof-file .form-actions .button { flex: 1 1 auto; }
  .cof-toolbar .field-label { width: 100%; }
}
@media print {
  .cof-section { display: none !important; }
}