.attachment-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:12px;margin:14px 0;min-width:0}.upload-preview-grid{grid-column:1/-1}.attachment-preview-card{min-width:0;border:1px solid #dfe6ee;border-radius:9px;overflow:hidden;background:#fff;padding-bottom:8px;text-align:center}.attachment-thumbnail{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;padding:0;overflow:hidden;background:#f5f7fa;color:#286aa8}.attachment-thumbnail img{display:block;width:100%;height:132px;object-fit:contain}.attachment-thumbnail>span:last-child{padding:6px;font-size:12px}.attachment-pdf{display:grid;place-items:center;height:132px;font-size:32px;font-weight:700;color:#d84c5d}.attachment-preview-name{padding:7px 10px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-preview-note{padding:0 10px 7px;color:#718196;white-space:pre-line;font-size:11px}.attachment-preview-error{font-size:12px;color:#9b5361}.attachment-viewer{width:min(1120px,96vw);height:min(900px,94dvh);max-width:96vw;max-height:94dvh;border:0;border-radius:10px;padding:0;color:#263548;background:#fff;box-shadow:0 12px 60px #15223750}.attachment-viewer::backdrop{background:#152237b8}.attachment-viewer>header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;border-bottom:1px solid #dfe6ee;flex-wrap:wrap}.attachment-viewer>header>strong{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.attachment-viewer-media{height:calc(100% - 76px);padding:14px;overflow:auto;background:#eaf0f5;display:flex;align-items:center;justify-content:center}.attachment-viewer-media img{display:block;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-in;margin:auto}.attachment-viewer-media.is-original{display:block}.attachment-viewer-media.is-original img{max-width:none;max-height:none;cursor:zoom-out}.attachment-viewer-media iframe{width:100%;height:100%;border:0;background:white}@media(max-width:600px){.attachment-preview-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.attachment-viewer>header{padding:10px}.attachment-viewer>header>strong{flex-basis:100%;font-size:14px}.attachment-viewer>header .actions{width:100%;justify-content:flex-end;gap:5px}.attachment-viewer>header button{font-size:12px;padding:7px 8px}.attachment-viewer-media{height:calc(100% - 106px);padding:8px}}@media print{.upload-preview-grid,.attachment-viewer{display:none!important}}